Author: | poppa |
---|---|
Views Total: | 430 views |
Official Page: | Go to website |
Last Update: | January 5, 2023 |
License: | MIT |
Preview:

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>
Changelog:
01/05/2023
- chore: Upgrade NPM packages and fix old stuff
09/17/2018
- Updated to the latest version