DEV Community

Discussion on: Creating practical Instagram-like galleries and horizontal lists with CSS scroll snapping

Collapse
 
jordachelouis profile image
Jordan

This is so great Joost, thank you! I'm new to JS and am looking to implement your gallery with indicators to display multiple carousels on a single webpage. The indicators were only working on the very first gallery, so I modified the "const list" to look at all lists. To ensure the first indicator on all galleries was selected at page load, I also added the .active class to the first indicator in html to serve as a default. This all "works", but as you scroll the indicators start to disappear and reappear. Was I on the right track or do you have any recommendations?

const lists = Array.from(document.querySelectorAll(".list"));
Enter fullscreen mode Exit fullscreen mode
<div class="indicatorsList" aria-hidden>
    <div class="indicator active"></div>
    <div class="indicator"></div>
    <div class="indicator"></div>
</div>
Enter fullscreen mode Exit fullscreen mode