Friday, September 13, 2024
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
Subscribe to:
Posts (Atom)
Image Slider ...
-
const slider = document.querySelector('.slider'); let currentIndex = 0; // Start from the first slide const intervalTime = 8000;...