Multi-Slider

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
});