@@ -70,102 +70,93 @@ const sectionSubtitle = "Meet some of our amazing speakers";
7070</Section >
7171
7272<script >
73- document.addEventListener('DOMContentLoaded', () => {
74- const track = document.querySelector('.speakers-track') as HTMLElement;
75- const slides = document.querySelectorAll('.speaker-slide');
76- const totalOriginalSlides = slides.length / 2;
77-
78- if (!track || slides.length === 0) return;
79-
80- let currentPosition = 0;
81- const scrollSpeed = 4000;
82- let slidingInterval: ReturnType<typeof setInterval> | null = null;
83-
84- // Function to determine slides per view based on window width
85- function getSlidesPerView() {
86- const width = window.innerWidth;
87- if (width <= 480) return 1;
88- if (width <= 640) return 2;
89- if (width <= 768) return 3;
90- if (width <= 1024) return 4;
91- return 5;
92- }
73+ document.addEventListener('DOMContentLoaded', () => {
74+ const track = document.querySelector('.speakers-track') as HTMLElement;
75+ const slides = document.querySelectorAll('.speaker-slide');
76+ const totalOriginalSlides = slides.length / 2;
77+
78+ if (!track || slides.length === 0) return;
79+
80+ let currentPosition = 0;
81+ const scrollSpeed = 4000;
82+ let slidingInterval: number | null = null;
83+
84+ function getSlidesPerView() {
85+ const width = window.innerWidth;
86+ if (width <= 480) return 1;
87+ if (width <= 640) return 2;
88+ if (width <= 768) return 3;
89+ if (width <= 1024) return 4;
90+ return 5;
91+ }
9392
94- function updateCarouselSettings() {
95- const slidesPerView = getSlidesPerView();
96- const slideWidth = 100 / slidesPerView;
93+ function updateCarouselSettings() {
94+ const slidesPerView = getSlidesPerView();
95+ const slideWidth = 100 / slidesPerView;
9796
98- // Reset position when breakpoint changes
99- currentPosition = 0;
100- track.style.transition = 'none';
101- track.style.transform = `translateX(0)`;
97+ currentPosition = 0;
98+ track.style.transition = 'none';
99+ track.style.transform = `translateX(0)`;
102100
103- // Clear and restart animation
104- if (slidingInterval !== null) {
105- clearInterval(slidingInterval);
106- }
107- startAnimation(slideWidth);
101+ if (slidingInterval !== null) {
102+ clearInterval(slidingInterval);
108103 }
104+ startAnimation(slideWidth);
105+ }
106+
107+ function startAnimation(slideWidth: number) {
108+ moveCarousel();
109+ slidingInterval = window.setInterval(moveCarousel, scrollSpeed);
109110
110- function startAnimation(slideWidth: number) {
111- // Initial setup
112- moveCarousel();
113- slidingInterval = setInterval(moveCarousel, scrollSpeed);
111+ function moveCarousel() {
112+ currentPosition += slideWidth;
114113
115- function moveCarousel() {
116- currentPosition += slideWidth ;
114+ track.style.transition = 'transform 1000ms linear';
115+ track.style.transform = `translateX(-${currentPosition}%)` ;
117116
118- track.style.transition = 'transform 1000ms linear';
119- track.style.transform = `translateX(-${currentPosition}%)`;
117+ if (currentPosition >= slideWidth * totalOriginalSlides) {
118+ setTimeout(() => {
119+ track.style.transition = 'none';
120+ currentPosition = 0;
121+ track.style.transform = `translateX(0)`;
120122
121- // Reset when we've scrolled through the original set of slides
122- if (currentPosition >= slideWidth * totalOriginalSlides) {
123123 setTimeout(() => {
124- track.style.transition = 'none';
125- currentPosition = 0;
126- track.style.transform = `translateX(0)`;
127-
128- setTimeout(() => {
129- track.style.transition = 'transform 1000ms linear';
130- }, 20);
131- }, 1000);
132- }
124+ track.style.transition = 'transform 1000ms linear';
125+ }, 20);
126+ }, 1000);
133127 }
134128 }
129+ }
135130
136- // Start the carousel
131+ updateCarouselSettings();
132+
133+ window.addEventListener('resize', () => {
137134 updateCarouselSettings();
135+ });
138136
139- // Update on window resize
140- window.addEventListener('resize', () => {
141- updateCarouselSettings();
142- });
137+ const carouselContainer = document.querySelector('.speakers-carousel-container');
138+ carouselContainer?.addEventListener('mouseenter', () => {
139+ if (slidingInterval !== null) {
140+ clearInterval(slidingInterval);
141+ slidingInterval = null;
142+ }
143+ });
143144
144- // Pause on hover
145- const carouselContainer = document.querySelector('.speakers-carousel-container');
146- carouselContainer?.addEventListener('mouseenter', () => {
145+ carouselContainer?.addEventListener('mouseleave', () => {
146+ updateCarouselSettings();
147+ });
148+
149+ document.addEventListener('visibilitychange', () => {
150+ if (document.hidden) {
147151 if (slidingInterval !== null) {
148152 clearInterval(slidingInterval);
149153 slidingInterval = null;
150154 }
151- });
152-
153- carouselContainer?.addEventListener('mouseleave', () => {
155+ } else {
154156 updateCarouselSettings();
155- });
156-
157- // Pause when tab is not visible
158- document.addEventListener('visibilitychange', () => {
159- if (document.hidden) {
160- if (slidingInterval !== null) {
161- clearInterval(slidingInterval);
162- slidingInterval = null;
163- }
164- } else {
165- updateCarouselSettings();
166- }
167- });
157+ }
168158 });
159+ });
169160</script >
170161
171162<style >
0 commit comments