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 =
}
runCarousel();
could anyone see if it is possible to do this as an infinite scroll and indicate the code to do so, please?
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?
YouTubeLun Dev
If you're looking to create a simple but effective image slider on your website or blog, then this video is for you! We'll show you how to create a slider using HTML, CSS and JavaScript, and then walk you through the steps step by step. If you're new to HTML, CSS and JavaScript, then this video is a great place to start. Thanks for watching!
Do...
Do...
