Responsive Mobile-friendly Carousel Plugin With Pure JavaScript

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>

Changelog:

01/05/2023

• chore: Upgrade NPM packages and fix old stuff

09/17/2018

• Updated to the latest version