https://beckerlawyers.com/wp-content/themes/paperstreet/js/sliders.js?ver=3.29117

1(() => {
2	// Global configuration
3	const autoplayDelay = 4000;
4
5	// Run script when DOM is fully parsed
6	document.addEventListener("DOMContentLoaded", () => {
7		// If none of the slider elements exist, exit early.
8		if (
9			!document.querySelector(
10				".js-slider-posts, .js-featured-slider, .js-news-slider, .js-insight-slider"
11			)
12		) {
13			return;
14		}
15		initializeSliders();
16	});
17
18	// Initializes all available sliders on the page
19	function initializeSliders() {
20		// Initialize posts slider if present
21		const sliderPostsEl = document.querySelector(".js-slider-posts");
22		if (sliderPostsEl) {
23			new Swiper(sliderPostsEl, {
24				loop: true,
25				autoplay: { delay: autoplayDelay },
26				speed: 500,
27			});
28		}
29
30		// Initialize featured slider with pagination if present
31		const featuredSliderEl = document.querySelector(".js-featured-slider");
32		if (featuredSliderEl) {
33			new Swiper(featuredSliderEl, {
34				loop: true,
35				autoplay: { delay: autoplayDelay },
36				effect: "slide",
37				speed: 1000,
38				slidesPerView: 1,
39				pagination: {
40					// Look for a pagination element within the slider first,
41					// otherwise fall back to the default selector.
42					el: featuredSliderEl.querySelector(".swiper-pagination") || ".swiper-pagination",
43					clickable: true,
44				},
45			});
46		}
47
48		// Initialize news slider with progressbar pagination if present
49		const newsSliderEl = document.querySelector(".js-news-slider");
50		if (newsSliderEl) {
51			new Swiper(newsSliderEl, {
52				loop: false,
53				effect: "slide",
54				speed: 300,
55				slidesPerView: 1,
56				spaceBetween: 15,
57				breakpoints: {
58					768: {
59						slidesPerView: 3,
60					},
61				},
62				scrollbar: {
63					el: ".swiper-scrollbar",
64					hide: false,
65					draggable: true,
66				},
67			});
68		}
69
70		// Initialize insight slider
71		const insightSliderEl = document.querySelector(".js-insight-slider");
72		if (insightSliderEl) {
73			new Swiper(insightSliderEl, {
74				loop: true,
75				effect: "fade",
76				speed: 1000,
77				slidesPerView: 1,
78				spaceBetween: 0,
79				autoplay: {
80					delay: 8000,
81					disableOnInteraction: false,
82				},
83			});
84		}
85
86		// After all sliders are initialized, add pause/play buttons
87		addPauseButtons();
88	}
89
90	// Adds pause/play buttons to all Swiper instances that allow pausing
91	function addPauseButtons() {
92		document.querySelectorAll(".swiper").forEach((swiperEl) => {
93			// Skip if the element has a "no-pause" class or lacks an id
94			if (swiperEl.classList.contains("no-pause") || !swiperEl.id) return;
95
96			const swiperInstance = swiperEl.swiper;
97			if (swiperInstance && swiperInstance.autoplay && swiperInstance.autoplay.running) {
98				const toggleButton = document.createElement("button");
99				toggleButton.classList.add("swiper-autoplay-toggle", "no-button");
100				toggleButton.setAttribute("data-swiper-id", swiperEl.id);
101				toggleButton.innerHTML =
102					'<i class="fas fa-pause"></i><span class="visually-hidden">Pause</span>';
103				swiperEl.appendChild(toggleButton);
104			}
105		});
106	}
107
108	// Event delegation for pause/play buttons
109	document.addEventListener("click", (event) => {
110		const toggleButton = event.target.closest(".swiper-autoplay-toggle");
111		if (!toggleButton) return;
112
113		const swiperID = toggleButton.getAttribute("data-swiper-id");
114		if (!swiperID) return;
115
116		const swiperEl = document.getElementById(swiperID);
117		if (!swiperEl || !swiperEl.swiper) return;
118
119		const swiperInstance = swiperEl.swiper;
120		if (swiperInstance.autoplay && swiperInstance.autoplay.running) {
121			swiperInstance.autoplay.stop();
122			toggleButton.innerHTML =
123				'<i class="fas fa-play"></i><span class="visually-hidden">Play</span>';
124		} else {
125			swiperInstance.autoplay.start();
126			toggleButton.innerHTML =
127				'<i class="fas fa-pause"></i><span class="visually-hidden">Pause</span>';
128		}
129	});
130})();