Minimal Image Carousel/Slideshow Plugin - Swiper

File Size: 4.07 KB
Views Total: 3826
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Minimal Image Carousel/Slideshow Plugin - Swiper

Swiper is a tiny and CSS-less jQuery slider plugin to create an image carousel or slideshow that features autoplay, dynamic image loading, navigation/pagination controls, and more.

How to use it:

1. Just load the core JavaScript swiper.js after jQuery library and we're ready to go.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/swiper.js"></script>

2. Create an empty element that serves as a container for the slider.

<div class="mySlider"></div>

3. Define the path to the images in an image list array.

const imageList = ['1.jpg', '2.jpg', '3.jpg']

4. Initialize the plugin to create an infinitely scrolling image carousel.

$('.mySlider').swiper({
  imageList: imageList
  animateType: 'animate'
});

5. Initialize the plugin as a crossfading slideshow.

$('.mySlider').swiper({
  imageList: imageList
  animateType: 'fade'
});

6. Enable & disable the autoplay functionality.

$('.mySlider').swiper({
  imageList: imageList
  isAuto: true
});

7. Enable & disable the navigation/pagination controls.

$('.mySlider').swiper({
  imageList: imageList
  changeBtn: true,
  slideBtn: true
});

8. Specify the width of the image when rendering.

$('.mySlider').swiper({
  imageList: imageList
  imageWidth: 400
});

This awesome jQuery plugin is developed by Mo-ys. For more Advanced Usages, please check the demo page or visit the official website.