Home/ Questions/Q 8147551
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T14:23:24+00:00

Ok, so I have a carousel that animates left and right. There is the

  • 0

Ok, so I have a carousel that animates left and right.

There is the viewport div of say…1000px wide and a series of divs inside that could total say 5000px. They are all floated left so at any one time, I am looking at only say 4 of the items in the viewport div. What would be the best method to make it infinite. How can I detect that the user has reached the last div in my carousel (going left OR right). Would you remove all elements and reverse the order and append them to the same div? Or some other method? I’m using jQuery…

This is just concept at the moment (the infinite part), so the code isn’t really possible to post. I’m just after potential solutions…

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I guess this is what you did to make a “normal” carousel.
    Suppose the HTML is this:

    <div class="viewport">
    <div class="container">
        <div class="group"> <!-- Without this div probably --!>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>
</div>

    To make it a “carousel” you would make the viewport’s width fixed and the container expand to contain all its children items (with overflow: hidden). When scrolling right, you decrease its left offset, and when scrolling left, you increase its left offset. If the left offset >= 0, you’re at the first item. If the left offset <= -(container width), you’re at the last item.

    You should check for these conditions each time you scroll left/right and accordingly, you will append a copy of the container before/after the “group”, and once the old group is not visible you can remove it. This makes the scrolling smooth, and the position won’t snap from the end to the beginning. However, this might be slow if there are lots of items. So, initially, you could divide your items into many “groups” of 5 for example, and once you reach an end, append a copy of the first/last group, and remove the first/last group.

    Another option would be to scroll in the opposite direction, fast. Instead of snapping to the other end, which does not give visual feedback to the user, you can animate scrolling much faster to the other end. In that case, once the user gets to the end, scrolling stops, and if he scrolls once more, it scrolls back to the beginning, so that he is not surprised of what is happening.

    That’s just my two cents. I once did a carousel, but did not have this feature. I had considered it though, without implementing it.

    Hope it helps.

    • 0