Friday, September 13, 2024

Image Slider
Image 14
Image 15
Image 15
Image 15

Friday, December 29, 2023

const slider = document.querySelector('.slider'); let currentIndex = 0; // Start from the first slide const intervalTime = 8000; // 8 seconds let slideInterval; // Function to start the slide interval function startSlide() { slideInterval = setInterval(nextSlide, intervalTime); } // Function to move to the next slide function nextSlide() { currentIndex++; slider.style.transition = 'transform 0.5s ease-in-out'; // Add transition for smooth sliding slider.style.transform = `translateX(-${currentIndex * 100}%)`; // Move to the next slide // If reached the last cloned slide, reset to the first one if (currentIndex === document.querySelectorAll('.slide').length-22) { currentIndex = 0; slider.style.transition = 'none'; // Remove transition for instant resetting slider.style.transform = `translateX(-${currentIndex * 100}%)`; // Move back to the first slide } } startSlide();
1 / 22
2 /22
3 / 22
4 / 22
5 / 22
6 / 22
7 / 22
8 / 22
9 / 22
10 / 22
11 / 22
12 22
13 22
14 / 22
15 / 22
16 / 22
17 / 22
18 / 22
19 / 22
20 / 22
21 / 22
22 / 22

Image Slider ...