Tiny Fading/Sliding Carousel In jQuery - Carousel.js
File Size: | 133 KB |
---|---|
Views Total: | 2024 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A tiny (~2.4kb minified) and easy-to-style jQuery carousel plugin to create an adaptive, responsive, auto-rotating slideshow or slider on the webpage.
More Features:
- Fade or Slide transition effect.
- Navigation arrows.
- Autoplay & pause controls.
- Dynamically load images from a JavaScript array.
- Automatically re-position images to fit within the carousel container.
How to use it:
1. Create an empty element that serves as a container for the slideshow or slider.
<div id="myCarousel"></div>
2. Define image paths in a JavaScript array as follows:
const imgList = [ { 'src': '1.jpg' }, { 'src': '2.jpg' }, { 'src': '3.jpg' }, { 'src': '4.jpg' }, // ... ]
3. Load the latest jQuery library and the Carousel.js plugin's files in the document.
<!-- Stylesheet --> <link rel="stylesheet" href="dist/carousel.min.css" /> <!-- Jquery --> <script src="/path/to/cdn/jquery.min.js"></script> <!-- Plugin --> <script src="/path/to/cdn/carousel.min.js"></script>
4. Load the latest Font Awesome Iconic Font for the controls.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/VERSION/css/all.min.css" />
5. Initialize the plugin to create a cross-fading slideshow.
const options = { items: imgList }; const api = $('#myCarousel').carousel(options);
6. Or a sliding carousel.
const options = { animation: 'slide' };
7. Enable the autoplay mode on init. Default: false.
const options = { auto: true };
8. Determine whether or not to show the autoplay/pause controls. Default: false.
const options = { controls: true };
9. Determine which slide to show on page load. Default:0 (slide 1).
const options = { index: 1 };
This awesome jQuery plugin is developed by falmeidapavao. For more Advanced Usages, please check the demo page or visit the official website.