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?Lun Dev
YouTube
How To Make Slider Food Using HTML CSS and JavaScript
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...
4 Replies
Here's a view of how Kevin will approach this:
https://www.youtube.com/watch?v=iLmBy-HKIAw
Kevin Powell
YouTube
Create an infinite horizontal scroll animation
🎓 Did you know I have courses? Both free and premium ones: https://kevinpowell.co/courses?utm_campaign=general&utm_source=youtube&utm_medium=infinitescroll
Infinite scroll animations for things like logos are relatively common these days, but there is a lot that we can do incorrectly when making one, so I decided to try and make one that respec...
Thank you for answering, but its not really what I want. That code is for an animation, and I had already looked at that particular example. I need it to be an image slider, that's controlled by arrows, and when I get to the last image, instead of the arrow disappearing, it stays there so that it goes directly to the first image. Thanks again.
You could do the bloated way and have an array that it loops through and create a new element and append it to the list, or once the plate is off the page. Give it an opacity of 0, translate it to right: -100% . The easiest way may be to remove and append each one
You can also do scroll driven animations now. And use the button to scrollTo
Alright.
I gave that example, because I believe it should be easy to reverse engineer for what you want.
Pretty much getting to the point @clevermissfox has described.
How when the slider gets to the end, it translates, or the array element moves to the end and all.