This time I will share jQuery Plugin and tutorial about Responsive Multi-slide Carousel Plugin With jQuery – Multislider, hope it will help you in programming stack.
| File Size: | 8.27 KB |
|---|---|
| Views Total: | 48840 |
| 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:
01 |
<div id="example<a href="https://www.jqueryscript.net/slider/">Slider</a>" class="exampleSlider"> |
02 |
<div class="MS-content"> |
03 |
<div class="item"> |
04 |
Item 2 |
05 |
</div> |
06 |
<div class="item"> |
07 |
Item 2 |
08 |
</div> |
09 |
<div class="item"> |
10 |
Item 3 |
11 |
</div> |
12 |
<div class="item"> |
13 |
Item 4 |
14 |
</div> |
15 |
<div class="item"> |
16 |
Item 5 |
17 |
</div> |
18 |
... |
19 |
</div> |
20 |
</div> |
2. Determine how many items to be displayed in a slide.
1 |
.exampleSlider .item { width: 20%; } |
2 |
.exampleSlider .item { width: 33.333%; } |
3 |
.exampleSlider .item { width: 50%; } |
4 |
.exampleSlider .item { width: 100%; } |
5 |
... |
3. Include jQuery library and the jQuery Multislider plugin’s script at the bottom of the html page.
1 |
<script src="//code.jquery.com/jquery.min.js"></script> |
2 |
<script src="js/multislider.js"></script> |
4. Call the function on the top container to generate a default carousel.
1 |
$('.exampleSlider').multislider() |
5. Customize the carousel by passing the following options as an object to the multislider() method.
01 |
$('.exampleSlider').multislider({ |
02 |
03 |
// endless scrolling |
04 |
continuous: false, |
05 |
06 |
// slide all visible slides, or just one at a time |
07 |
slideAll: false, |
08 |
|
09 |
// autoplay interval |
10 |
// 0 or 'false' prevents auto-sliding |
11 |
interval: 2000, |
12 |
13 |
// duration of slide animation |
14 |
duration: 500, |
15 |
16 |
// pause carousel on hover |
17 |
hoverPause: true, |
18 |
|
19 |
// pause above specified screen width |
20 |
pauseAbove: null, |
21 |
|
22 |
// pause below specified screen width |
23 |
pauseBelow: null |
24 |
|
25 |
}) |
6. API methods.
01 |
// pause the carousel |
02 |
$('.exampleSlider').multislider('pause') |
03 |
04 |
// resume the carousel |
05 |
$('.exampleSlider').multislider('unPause') |
06 |
07 |
// scroll to the next |
08 |
$('.exampleSlider').multislider('next') |
09 |
10 |
// scroll all visible slides |
11 |
$('.exampleSlider').multislider('nextAll') |
12 |
13 |
// back to the previous |
14 |
$('.exampleSlider').multislider('prev') |
15 |
16 |
// scroll all visible slides |
17 |
$('.exampleSlider').multislider('prevAll') |
18 |
19 |
// endless scroll |
20 |
$('.exampleSlider').multislider('continuous') |
7. Events.
1 |
$('#exampleSlider').on('ms.after.animate', function(){ |
2 |
// after scroll |
3 |
}); |
4 |
5 |
$('#exampleSlider').on('ms.before.animate', function(){ |
6 |
// before scroll |
7 |
}); |
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.
source : jquery.net
