View on GitHub

Custom carousel

Carousel with swipe effect for mobile support

How it works

This carousel is based on the swiper plugin. It provides touch support, extended setup and works great on mobile devices.

Demo

First slide

Slide 1

Lorem ipsum dolor sit amet

Second slide

Slide 2

Lorem ipsum dolor sit amet

Third slide

Slide 3

Lorem ipsum dolor sit amet

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide" id="slide1">
      <div class="card">
        <div class="card-img">
          <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="1096" height="380" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img">
          <rect width="100%" height="100%" fill="#3ebd87"/>
          <text x="50%" y="50%" fill="#0003" dy=".3em" dominant-baseline="middle" text-anchor="middle" class="font-weight-bold">First slide</text>
          </svg>
        </div>
        <div class="card-body">
          <h3 class="card-title h5">Slide 1</h3>
          <p>Lorem ipsum dolor sit amet</p>
        </div>
      </div>
    </div>
    <div class="swiper-slide" id="slide2">
      <div class="card">
        <div class="card-img">
          <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="1096" height="380" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img">
          <rect width="100%" height="100%" fill="#4bb4e6"/>
          <text x="50%" y="50%" fill="#0003" dy=".3em" dominant-baseline="middle" text-anchor="middle" class="font-weight-bold">Second slide</text>
          </svg>
        </div>
        <div class="card-body">
          <h3 class="card-title h5">Slide 2</h3>
          <p>Lorem ipsum dolor sit amet</p>
        </div>
      </div>
    </div>
    <div class="swiper-slide" id="slide3">
      <div class="card">
        <div class="card-img">
          <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="1096" height="380" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img">
            <rect width="100%" height="100%" fill="#ffb4e6"/>
            <text x="50%" y="50%" fill="#0003" dy=".3em" dominant-baseline="middle" text-anchor="middle" class="font-weight-bold">Third slide</text>
          </svg>
        </div>
        <div class="card-body">
          <h3 class="card-title h5">Slide 3</h3>
          <p>Lorem ipsum dolor sit amet</p>
        </div>
      </div>
    </div>
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev" title="Previous"></div>
  <div class="swiper-button-next" title="Next"></div>
</div>
<button id="swiperPlayButton" type="button" class="btn btn-info btn-icon btn-xs mt-0" aria-label="Pause Carousel" title="Pause Carousel">
  <span class="icon-Pause" aria-hidden="true"></span>
</button>

Usage

Make sure to add the vendor CSS and JS files to your page to get the plugin working.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@4.5.1/dist/css/swiper.min.css" integrity="sha384-3ycIs75n6btZktoCV/zcWo54Eq+bnjaJ9iwOISgNPQIXRSmrkf4XP1iHsWNq0jPB" crossorigin="anonymous">
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/swiper@4.5.1/dist/js/swiper.min.js" integrity="sha384-llVNZVxgabZyf5ZeGs3m2QcNbEE0UK1PBKM6ZoJmWK5BuBpqZUXpN1nWXd0SrAC5" crossorigin="anonymous"></script>
</body>
</html>

Configuration

Here is the recommended setup for an accessible carousel:

var mySwiper = new Swiper('.swiper-container', {
    autoplay: {
    delay: 3500,
  },
  a11y: true,
  keyboard: {
    enabled: true,
    onlyInViewport: false
  },
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: true
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  spaceBetween: 10,
  slidesPerView: 'auto',
  centeredSlides: false,
  freeMode: false,
  breakpoints: {
    767: {
      pagination: {
        clickable: false
      },
      freeMode: true,
      freeModeMomentumRatio: .5,
      centeredSlides: false,
      slideToClickedSlide: false
    }
  }
})

Be aware that having a play/pause button implies having autoplay set to true in the configuration. Find below an example for our custom button

  $("#swiperPlayButton").click(function () {
    var MySwiper = document.querySelector('.swiper-container').swiper;
    if ($("span",this).hasClass("icon-Pause")) {
      MySwiper.autoplay.stop();
      $(this).attr("aria-label", "Play Carousel");
      $(this).attr("title", "Play Carousel");
      $("span",this).toggleClass("icon-Pause icon-Play");
    } else {
      MySwiper.autoplay.start();
      $(this).attr("aria-label", "Pause Carousel");
      $(this).attr("title", "Pause Carousel");
      $("span",this).toggleClass("icon-Play icon-Pause");
    }
  });