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

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.