Responsive Mobile-friendly Carousel Plugin With Pure JavaScript

Category: Javascript , Slider | December 3, 2016
Author: poppa
Views Total: 823
Official Page: Go to website
Last Update: December 3, 2016
License: MIT

Preview:

Responsive Mobile-friendly Carousel Plugin With Pure JavaScript

Description:

A responsive, flexible, mobile-friendly carousel plugin that supports image lazy loading and multi-serving using HTML5 data attributes.

How to use it:

To install the carousel plugin, just copy and import the following files to the html document.

<link rel="stylesheet" href="/path/to/carousel.min.css">
<script src="/path/to/carousel.min.js"></script>

Add custom items to the carousel and config each item using HTML5 data attributes as shown below:

  • data-carousel-href: item link
  • data-carousel-src: mobile (small) version of your image
  • data-carousel-mq-768: desktop (large) version of your umage
  • data-carousel-mq-414: tablet (medium) version of your image
<div class="carousel-slider">

  <div class="carousel-item" data-carousel-href="#">
    <div class="carousel-item-text">
      <h3>Item 1</h3>
    </div>
    <img src="loading.gif"
         data-carousel-src="mobile-1.png"
         data-carousel-mq-768="desktop-1.png"
         data-carousel-mq-414="1.png"
         alt="Image 1">
  </div>

  <div class="carousel-item" data-carousel-href="#">
    <div class="carousel-item-text">
      <h3>Item 2</h3>
    </div>
    <img src="loading.gif"
         data-carousel-src="mobile-2.png"
         data-carousel-mq-768="desktop-2.png"
         data-carousel-mq-414="2.png"
         alt="Image 2">
  </div>

  <div class="carousel-item" data-carousel-href="#">
    <div class="carousel-item-text">
      <h3>Item 3</h3>
    </div>
    <img src="loading.gif"
         data-carousel-src="mobile-3.png"
         data-carousel-mq-768="desktop-3.png"
         data-carousel-mq-414="3.png"
         alt="Image 3">
  </div>

   ...

</div>

The insert them into a DIV container with the CSS class of ‘carousel’. You can also pass the following options to the carousel using the following data attributes:

  • data-carousel-delay: transition delay
  • data-carousel-touch-threshold: x distance to swipe before transition starts
  • data-carousel-indicators: custom indicators
<div class="carousel"
     data-carousel-delay="5000"
     data-carousel-touch-threshold="220"
     data-carousel-indicators="">
  <div class="carousel-slider">

    <div class="carousel-item" data-carousel-href="#">
      <div class="carousel-item-text">
        <h3>Item 1</h3>
      </div>
      <img src="loading.gif"
           data-carousel-src="mobile-1.png"
           data-carousel-mq-768="desktop-1.png"
           data-carousel-mq-414="1.png"
           alt="Image 1">
    </div>

    <div class="carousel-item" data-carousel-href="#">
      <div class="carousel-item-text">
        <h3>Item 2</h3>
      </div>
      <img src="loading.gif"
           data-carousel-src="mobile-2.png"
           data-carousel-mq-768="desktop-2.png"
           data-carousel-mq-414="2.png"
           alt="Image 2">
    </div>

    <div class="carousel-item" data-carousel-href="#">
      <div class="carousel-item-text">
        <h3>Item 3</h3>
      </div>
      <img src="loading.gif"
           data-carousel-src="mobile-3.png"
           data-carousel-mq-768="desktop-3.png"
           data-carousel-mq-414="3.png"
           alt="Image 3">
    </div>

     ...

  </div>
</div>