Responsive Multi-slide Carousel Plugin With jQuery - Multislider

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.