OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Animated flexbox order to make a smooth scrolling infinite scroll

  • Thread starter Thread starter user18102663
  • Start date Start date
U

user18102663

Guest
I'm trying to make an infinite scroll carousel. Let's say it has three items & the HTML is:

Code:
<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:

Code:
.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:

Code:
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?

<p>I'm trying to make an infinite scroll carousel. Let's say it has three items & the HTML is:</p>
<pre><code><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>
</code></pre>

<p>and the CSS is something like:</p>
<pre><code>.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;
}
</code></pre>
<p>and the JS is:</p>
<pre><code>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;
}
});
}
};
</code></pre>
<p>codepen below:
<a href="https://codepen.io/phil-green-CTI/pen/abrKNKw?editors=1111" rel="nofollow noreferrer">https://codepen.io/phil-green-CTI/pen/abrKNKw?editors=1111</a></p>
<p>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).</p>
<p>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?</p>
 

Latest posts

Top