An Accessible Touch-enabled Slider Web Component

fg-carousel Slider – A simple & modern slider web component to create versatile, accessible, touch-enabled picture carousels utilizing CSS scroll snap, Custom Element, and Intersection Observer API.

Must Read: A Simple Infinite Image Carousel Using Pure Javascript

How to make use of it:

1. Import the fg-carousel’s library.

<!-- Intersection Observer Polyfill -->
<script src="./lib/intersection-observer.js"></script>
<!-- Custom Elements Polyfill -->
<script src="./lib/document-register-element.js"></script>
<!-- Core Module -->
<script type="module" src="./src/fg-carousel.js"></script>
<!-- For IE 11 -->
<script src="./es5/fg-carousel.js" defer nomodule></script>
<!-- Stylesheet -->
<link rel="stylesheet" href="src/fg-carousel.css" />

2. Add photos to the carousel element.

<fg-carousel>
  <div class="carousel_pane_crop">
    <div class="carousel_pane">
      <div class="carousel_items">
        <div class="carousel_item" id="img-1">
          // Add Image Here
        </div>
        <div class="carousel_item" id="img-2">
          // Add Image Here
        </div>
        <div class="carousel_item" id="img-3">
          // Add Image Here
        </div>
      </div>
    </div>
  </div>
</fg-carousel>

3. Add thumbnail navigation to the bottom of the carousel.

<div class="carousel_nav">
  <a href="#img-1"> // Add Image Here </a>
  <a href="#img-2"> // Add Image Here> </a>
  <a href="#img-3"> // Add Image Here </a>
</div>

4. Add navigation arrows to the carousel.

<fg-carousel  data-carousel-nextprev>
  <div class="carousel_pane_crop">
    <div class="carousel_pane">
      <div class="carousel_items">
        <div class="carousel_item">
          // Add Image Here
        </div>
        <div class="carousel_item">
          // Add Image Here
        </div>
        <div class="carousel_item">
          // Add Image Here
        </div>
      </div>
    </div>
  </div>
</fg-carousel>

5. Enable autoplay on the carousel.

<fg-carousel data-carousel-autoplay="5000">
  <div class="carousel_pane_crop">
    <div class="carousel_pane">
      <div class="carousel_items">
        <div class="carousel_item">
          // Add Image Here
        </div>
        <div class="carousel_item">
          // Add Image Here
        </div>
        <div class="carousel_item">
          // Add Image Here
        </div>
      </div>
    </div>
  </div>
</fg-carousel>

6. Enable infinite looping on the carousel.

<fg-carousel data-carousel-loop>
  <div class="carousel_pane_crop">
    <div class="carousel_pane">
      <div class="carousel_items">
        <div class="carousel_item">
          // Add Image Here
        </div>
        <div class="carousel_item">
          // Add Image Here
        </div>
        <div class="carousel_item">
          // Add Image Here
        </div>
      </div>
    </div>
  </div>
</fg-carousel>

7. Allows a number of carousel items per view.

@media (min-width: 30em){
  .carousel_item {
    width: 50%;
  }
  .carousel_pane {
    scroll-snap-points-x: repeat(50%);
  }
}
@media (min-width: 50em){
  .carousel_item {
    width: 33.333%;
  }
  .carousel_pane {
    scroll-snap-points-x: repeat(33.33333%);
  }
}