HTML
<div id="multi-slider" class="multi-slider">
<div class="multi-inner">
<ul class="slides">
<li class="slide">INSERT CONTENT</li>
<li class="slide">INSERT CONTENT</li>
<li class="slide">INSERT CONTENT</li>
</ul>
</div>
</div>
Default CSS
/*-- multiSlider --*/
.multi-slider{position:relative;max-width:100%;}
.multi-inner{overflow:hidden;}
.multi-slider .slides{overflow:hidden;padding:0;margin:0 auto;position:relative;width:1000%;}
.multi-slider.not-enough .slides{width:auto;}
.multi-slider .slides > li{display:block;float:left;}
.multi-slider .slides img{max-width:100%;height:auto;}
.multi-slider .multi-dirnav{text-align:center;margin:0;}
.multi-slider .multi-dirlink{display:inline-block;width:30px;height:30px;line-height:30px;background:#5eb8e2;color:#fff;cursor:pointer;position:absolute;top:40%;right:100%;z-index:20;}
.multi-slider .next{left:100%;right:auto;}
/* User */
.multi-slider{width:1000px;margin:0 auto;}
.multi-slider .slides > li{width:250px;text-align:center;}
@media screen and (max-width : 1060px) {
.multi-slider{width:750px;
}
@media screen and (max-width : 810px) {
.multi-slider{width:500px;}
}
@media screen and (max-width : 560px) {
.multi-slider{width:250px;}
}
Add jQuery & Plugin
<script src="js/libs/jquery.js"></script>
<script src="js/multislider.js"></script>
Initialize Plugin
$(function(){
// Init - multiSlider
$('#multi-slider').multiSlider();
});
Options
$('#multi-slider').multiSlider({
// Defaults
buildDirNav: true, // Boolean: Build Arrow Navigation
autoPlay: false, // Boolean: Have slider automatically start or not
delay: 5000, // Integer: Time in between Slides
minSlides: 4 // Integer: Minimum number of slides to start slider
});