I’m trying to make an infinite scroll carousel. Let’s say it has three items & the HTML is:
<html>
<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>
and the CSS is something like:
.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;
}
and the JS 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;
}
});
}
};
codepen below:
https://codepen.io/phil-green-CTI/pen/abrKNKw?editors=1111
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?