jDev
KPCKevin Powell - Community
•Created by jDev on 1/30/2024 in #front-end
Infinite slider with HTML, CSS and JS
I came across this video, https://www.youtube.com/watch?v=sXMcXz_1Vls where the coder has created a wonderful-looking front page and I tried to copy it but would like to be able to make the slider infinite, that is to say, once you get to the final image it continues to the first image.
This is the JavaScript that he has used :
let circle = document.querySelector('.circle');
let slider = document.querySelector('.slider');
let list = document.querySelector('.lists');
let prev = document.getElementById('prev');
let next = document.getElementById('next');
let items = document.querySelectorAll('.lists .item');
let count = items.length;
let active = 1;
let leftTransform = 0;
let width_item = items[active].offsetWidth;
next.onclick = () => {
active = active >= count - 1 ? count - 1 : active + 1;
runCarousel();
}
prev.onclick = () => {
active = active <= 0 ? active : active - 1;
runCarousel();
}
function runCarousel() {
prev.style.display = (active == 0) ? 'none' : 'block';
next.style.display = (active == count - 1) ? 'none' : 'block';
let old_active = document.querySelector('.item.active');
if(old_active) old_active.classList.remove('active');
items[active].classList.add('active');
leftTransform = width_item * (active - 1) * -1;
list.style.transform =
translateX(${leftTransform}px);
}
runCarousel();
could anyone see if it is possible to do this as an infinite scroll and indicate the code to do so, please?6 replies