Responsive Multi-slide Carousel Plugin With jQuery - Multislider

Responsive Multi-slide Carousel Plugin With jQuery - Multislider
File Size: 8.27 KB
Views Total: 55241
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 class="item">
      Item 2
    <div class="item">
      Item 3
    <div class="item">
      Item 4
    <div class="item">
      Item 5

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="//"></script> 
<script src="js/multislider.js"></script> 

4. Call the function on the top container to generate a default carousel.


5. Customize the carousel by passing the following options as an object to the multislider() method.


  // 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

// resume the carousel

// scroll to the next

// scroll all visible slides 

// back to the previous

// scroll all visible slides

// endless scroll

7. Events.

$('#exampleSlider').on('ms.after.animate', function(){
  // after scroll

$('#exampleSlider').on('ms.before.animate', function(){
  // before scroll



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