I'm trying to make an infinite scroll carousel. Let's say it has three items & the HTML is:
document.querySelectorAll('.buttons .button').forEach((button) => { button.addEventListener('click', (event) => { slide(event.target.getAttribute('data-direction')); });});const slide = (direction) => { const allSlides = document.querySelectorAll('.carousel-slides .carousel-slide' ); if ('right' === direction) { allSlides.forEach((el) => { el.style.order--; if (el.style.order < 1) { el.style.order = allSlides.length; } }); } else if ('left' === direction) { allSlides.forEach((el) => { el.style.order++; if (el.style.order > allSlides.length) { el.style.order = 1; } }); }};.post-carousel { margin : 0 auto 40px; outline : 1px solid black; width : 640px; }.buttons { display : flex; justify-content : space-between; width : 620px; margin : auto; }.button { background-color : #fff; border : 1px solid green; z-index : 2; padding : 4px; width : 45px; }.carousel-slides { column-gap : 10px; display : flex; flex-flow : row nowrap; padding : 10px 0; margin : 0 10px; }.carousel-slide { background-color : lightgreen; border-radius : 16px; outline : 1px solid var(--RISD-Blue-Med-Light, #d6e2ff); display : flex; flex-direction : column; flex : 200px 0 0; font-size : 12px; gap : 16px; height : 50px; justify-content : flex-start; max-width : 280px; outline : 2px solid green; padding : 24px 0; text-align : center; }.carousel-slide.red { background-color : red; }.carousel-slide.blue { background-color : blue; }<div class="buttons"><div class="button button-left" data-direction="left">LEFT</div><div class="button button-right" data-direction="right">RIGHT</div></div><div class="post-carousel"><div class="carousel-slides"><div class="carousel-slide red" data-placement="1" style="order: 1">ONE</div><div class="carousel-slide blue" data-placement="2" class="blue" style="order: 2">TWO</div><div class="carousel-slide" data-placement="3" style="order: 3">THREE</div></div></div>Clicking on the right or left buttons reorders the items in the flexbox and puts the last into the first (or first into the last).
This works, but my issue is that I want the transition to be smooth so that the they scroll nicely into place instead of just being repositioned. Ideally, when the 1st becomes the last (or vice versa) I'd like it to also scroll off of the edge of the div (or on screen from off). How would I do this?