Accessible Touch-enable Slider Component – fg-carousel

Preview:

Description:

A modern slider web component to create flexible, accessible, touch-enabled image carousels using CSS scroll snap, Custom Element, and Intersection Observer API.

How to use it:

1. Import the fg-carousel’s files and other resources into your project.

<!-- 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 images to the carousel component. That’s it.

<fg-carousel>
  <div class="carousel_pane_crop">
    <div class="carousel_pane">
      <div class="carousel_items">
        <div class="carousel_item" id="img-1">
          <img src="1.jpg" alt="">
        </div>
        <div class="carousel_item" id="img-2">
          <img src="2.jpg" alt="">
        </div>
        <div class="carousel_item" id="img-3">
          <img src="3.jpg" alt="">
        </div>
      </div>
    </div>
  </div>
</fg-carousel>

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

<div class="carousel_nav">
  <a href="#img-1"><img src="thumb-1.jpg" alt=""></a>
  <a href="#img-2"><img src="thumb-2.jpg" alt=""></a>
  <a href="#img-3"><img src="thumb-3.jpg" alt=""></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">
          <img src="1.jpg" alt="">
        </div>
        <div class="carousel_item">
          <img src="2.jpg" alt="">
        </div>
        <div class="carousel_item">
          <img src="3.jpg" alt="">
        </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">
          <img src="1.jpg" alt="">
        </div>
        <div class="carousel_item">
          <img src="2.jpg" alt="">
        </div>
        <div class="carousel_item">
          <img src="3.jpg" alt="">
        </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">
          <img src="1.jpg" alt="">
        </div>
        <div class="carousel_item">
          <img src="2.jpg" alt="">
        </div>
        <div class="carousel_item">
          <img src="3.jpg" alt="">
        </div>
      </div>
    </div>
  </div>
</fg-carousel>

7. Allows multiple 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%);
  }
}