Responsive Infinite jQuery Carousel Slider Plugin - LoopSlider
File Size: | 2.33 MB |
---|---|
Views Total: | 5273 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
LoopSlider is a lightweight, responsive, touch-enabled JavaScript / HTML5 slider plugin used to rotate through an unlimited amount of images in a fully responsive and customizable carousel UI.
Key features:
- Autoplay and pause on hover.
- Easing effects.
- Touch enabled.
- Adapt to any screen size.
- Specify how many images in one slide.
- Custom carousel controls.
- Parallax scrolling effect.
- Callback functions.
How to use it:
1. Put the CSS in the head section of your HTML document.
<link rel="stylesheet" href="loopslider.css">
2. Add images and captions to the carousel slider as follow.
<div class="demo"> <figure> <img src="1.jpg"> <figcaption class="caption">Caption 1</figcaption> </figure> <figure> <img src="2.jpg"> <figcaption class="caption">Caption 2</figcaption> </figure> <figure> <img src="3.jpg"> <figcaption class="caption">Caption 3</figcaption> </figure> </div>
3. Put jQuery library and the JavaScript file jquery.loopslider.js
at the bottom of the document.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="jquery.loopslider.js"></script>
4. Optionally, you can include jQuery UI library or jQuery easing for more easing effects.
<script src="jquery.easing.min.js"></script>
5. Call the function on the top container to generate a basic image carousel with default settings.
$('.demo').loopslider();
6. Configuration options with default values.
$('.demo').loopslider({ // custom template htmlSliderWraper:'<div style="overflow:hidden;"></div>', htmlSliderBody:'<div style="position:relative;"></div>', htmlItemWraper:'<div style="float:left;"></div>', htmlPaginationContainer:'<div class="slider-pagination"></div>', htmlPaginationItem:'<div></div>', // how many items on one slide visibleItems:3, // animation duration slideDuration:400, // easing effect // include jQuery UI or jQuery easing plugin for more easing effects easing:'swing', // enable touch / swipe support touchSupport:true, // enable responsive layout // responsive: { // 480: {visibleItems: 1,step: 1}, // 760: {visibleItems: 3,step: 3}, // 1000: {visibleItems: 4,step: 3} // } responsive:false, // enable autoplay autoplay:false, // pause on hover when autoplay actived stopOnHover:false, // autoplay interval autoplayInterval:3000, // fullscreen mode fullscreen: false, // parallax effect settings parallax:null // custom carousel controls prevButton:null, nextButton:null, stopButton:null, playButton:null, // space between slides gap:0, // amount of slides scrolling each time step:1, // enable pagination pagination:false, // enable navigation navigation:false, // callbacks onStop:null, onPlay:null, onMove:null });
Changelog:
2018-06-08
- v0.2.1: JS & CSS updated
2016-02-05
- v0.2: added parallax & fullscreen options.
2016-02-05
- JS update.
2015-11-16
- Added touchSupport and Navigation options.
This awesome jQuery plugin is developed by pgooood. For more Advanced Usages, please check the demo page or visit the official website.