Add Custom Navigation Buttons To Scrollable Containers – Carouscroll.js

Preview:

Description:

The carouscroll web component enables you to enhance horizontal scrolling containers into full-featured carousels and sliders.

It adds next/previous buttons that allow users to smoothly navigate through items inside your scrollable containers.

How to use it:

1. Download the package and import the carouscroll.js as a module.

<script type="module" src="carouscroll.js"></script>

2. Wrap your scrollable items into the carou-scroll custom element.

<carou-scroll id="slider">
  <div class="slide-item">1</div>
  <div class="slide-item">2</div>
  <div class="slide-item">3</div>
  ... more slides here ...
</carou-scroll>

3. Loop through the scrollable items just like in a carousel.

<carou-scroll id="slider" loop>
  ...
</carou-scroll>

4. Add next/prev buttons to the carou-scroll.

<button type="button" disabled data-carousel-previous="slider">&lt; Previous</button>
<button type="button" disabled data-carousel-next="slider">Next &gt;</button>

5. The optional output element can enhance accessibility by announcing the current slide number.

<output data-carousel-output="slider"></output>

6. Make the carou-scroll container scrollable.

carou-scroll {
  display: flex;
  overflow-x: scroll;
  overflow-y: hidden;
}
carou-scroll > * {
  min-width: 100%;
  aspect-ratio: 16/9;
}