Tiny Fading/Sliding Carousel In jQuery - Carousel.js

Tiny Fading/Sliding Carousel In jQuery - Carousel.js
File Size: 133 KB
Views Total: 639
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.