Responsive Multi-slide Carousel Plugin With jQuery - Multislider
File Size: | 8.27 KB |
---|---|
Views Total: | 61617 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Multislider is a responsive, customizable, dynamically-resized jQuery slider/carousel plugin that allows for any content types and supports multiple items in a slide.
How to use it:
1. Add slide items to the carousel following the markup structure as shown below:
<div id="exampleSlider" class="exampleSlider"> <div class="MS-content"> <div class="item"> Item 2 </div> <div class="item"> Item 2 </div> <div class="item"> Item 3 </div> <div class="item"> Item 4 </div> <div class="item"> Item 5 </div> ... </div> </div>
2. Determine how many items to be displayed in a slide.
.exampleSlider .item { width: 20%; } .exampleSlider .item { width: 33.333%; } .exampleSlider .item { width: 50%; } .exampleSlider .item { width: 100%; } ...
3. Include jQuery library and the jQuery Multislider plugin's script at the bottom of the html page.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="js/multislider.js"></script>
4. Call the function on the top container to generate a default carousel.
$('.exampleSlider').multislider()
5. Customize the carousel by passing the following options as an object to the multislider()
method.
$('.exampleSlider').multislider({ // endless scrolling continuous: false, // slide all visible slides, or just one at a time slideAll: false, // autoplay interval // 0 or 'false' prevents auto-sliding interval: 2000, // duration of slide animation duration: 500, // pause carousel on hover hoverPause: true, // pause above specified screen width pauseAbove: null, // pause below specified screen width pauseBelow: null })
6. API methods.
// pause the carousel $('.exampleSlider').multislider('pause') // resume the carousel $('.exampleSlider').multislider('unPause') // scroll to the next $('.exampleSlider').multislider('next') // scroll all visible slides $('.exampleSlider').multislider('nextAll') // back to the previous $('.exampleSlider').multislider('prev') // scroll all visible slides $('.exampleSlider').multislider('prevAll') // endless scroll $('.exampleSlider').multislider('continuous')
7. Events.
$('#exampleSlider').on('ms.after.animate', function(){ // after scroll }); $('#exampleSlider').on('ms.before.animate', function(){ // before scroll });
Changelog:
2019-02-15
- JS update
This awesome jQuery plugin is developed by TJBlackman. For more Advanced Usages, please check the demo page or visit the official website.