How to use μslider

Basic HTML

<!-- define a container for the slides -->
<!-- choose an ID for your container (in our example id="slider") -->

<div id="slider">

	<!-- every slide must have class "slide" -->
	<!-- the content can be an image -->
	
	<div class="slide">
		<img src="path/image/img.jpg" alt="alternative text" title="image caption" />
	</div>
	
	<!-- or the content can be a text -->
	
	<div class="slide">
		<h1>title</h1>
		<h2>subtitle</h2>
		<p>paragraph of a random text</p>
	</div>
	
	<!-- or a text + an image -->
	
	<div class="slide">
		<p>text paragraph + image</p>
		<img src="path/image/img.jpg" alt="alternative text" title="image caption" />
		<!-- note: if "title" is empty no caption will be shown -->
	</div>
</div>

<!-- buttons for slide navigation control -->
<!-- the container must have class "navslide" -->

<div class="navslide">
	<p>
		<!-- it is important that the control buttons have these ID -->
		
		<span id="prev"><img src="path/image/prev.jpg" alt="prev" title="prev" /></span>
		<span id="start"><img src="path/image/start.jpg" alt="start" title="start" /></span>
		<span id="stop"><img src="path/image/stop.jpg" alt="stop" title="stop" /></span>
		<span id="next"><img src="path/image/next.jpg" alt="next" title="next" /></span>
	</p>
	<!-- note: instead of images you can simply use words inside the <span> element -->
</div>

Basic HTML for images "lazy" load

<!-- "lazy" load is used to load images only when necessary -->
<!-- put the url of a placeholder image in "src" and the address of the image to be loaded in "rel" -->

<div class="slide">
	<img src="path/image/placeholder.jpg" rel="path/image/img.jpg" alt="alternative text" title="image caption" />
</div>	

Basic HTML for audio and video files

<!-- HTML5 audio -->

<div class="slide">
	<audio controls="controls" preload="none">
		<source src="path/audio/audio.ogg" type="audio/ogg" />
		<source src="path/audio/audio.mp3" type="audio/mpeg" />
		<p>Your browser does not support html5 audio element.</p>
	</audio>
</div>
	
<!-- HTML5 video -->

<div class="slide">
	<video width="880" height="495" controls="controls" poster="poster.png" preload="none">
		<source src="path/video/video.ogg" type="video/ogg" />
		<source src="path/video/video.mp4" type="video/mp4" />
		<p>Your browser does not support html5 video element.</p>
	</video>
</div>

<!-- Vimeo audio and video -->
	
<div class="slide">
	<!-- it is important that the <iframe> has an ID and class "vimeo" -->
	<!-- in "src" after video_id? add api=1 and player_id=ID (look at the code below) -->
	
	<iframe id="player1" class="vimeo" src="http://player.vimeo.com/video/video_id?api=1&player_id=player1&title=0&byline=0&portrait=0&color=cc0000" width="880" height="495" frameborder="0" allowFullScreen></iframe>
</div>

<!-- audio e video YouTube -->

<div class="slide">
	<!-- it is important that the <iframe> is contained in a <div> with an ID and class "youtube" -->
	
	<div id="player2" class="youtube">
		<iframe width="880" height="477" src="http://www.youtube.com/embed/video_id frameborder="0">
		</iframe>
	</div>
</div>	

Basic CSS

/*
* container style
*/

#slider {
	position: relative;
	margin: 0 auto;
	padding: 0;
	overflow: hidden;
	border: 12px solid #fff;
	border-radius: 5px;
	background: #fafafa;
}

/*
* single slide style
*/

.slide {
	position: absolute;
	left: 0px;
	top: 0px;
}

/*
* image caption style
*/

.caption {
	position: absolute;
	bottom: -42px;
	width: 100%;
	background: #222;
	background: rgba(20,20,20,0.7);
	color: #f7f7f7;
	border-top: 1px solid #404040;
}

.caption p {
	padding: 0px 10px;
}

/*
* slides control buttons style
*/

.navslide {
	position: relative;
	margin: 15px auto;
	padding: 0;
	text-align: center;
}

.navslide p span {
	margin: 0px 10px;
	cursor: pointer;
}

#start, #stop {
	display: none;
}

Files to include

<!-- basic μslider css -->
<link rel="stylesheet" type="text/css" media="screen" href="path/css/muslider_style.css" />

<!-- your jQuery version -->
<script type="text/javascript" src="path/js/jquery-1.7.1.min.js" ></script>

<!-- your μslider version -->
<script type="text/javascript" src="path/js/jquery.muslider-1.0.min.js" ></script>

<!-- if you have included Vimeo videos (tip: include this file at the end before closing </body>) -->
<script type="text/javascript" src="path/js/jquery.vimeosupport.js" ></script>

<!-- if you have included YouTube videos (tip: include this file at the end before closing </body>) -->
<script type="text/javascript" src="path/js/jquery.youtubesupport.js" ></script>	

Basic inizialization

<!-- in our example the container has id="slider" thus -->

<script type="text/javascript">
	$(document).ready(function(){
		$("#slider").muslider();
	});	
</script>	

Configurable options

width (number)

It is the width of the slides container, it accepts a numeric value (in pixels).

Default value: 880. Configuration example:

$("#slider").muslider({
	"width": 600
});

height (number)

It is the height of the slides container, it accepts a numeric value (in pixels).

Default value: 400. Configuration example:

$("#slider").muslider({
	"height": 500
});

animation (string)

It is the parameter that defines if the slideshow must start automatically or not.

Default value: manual. Accepted values: manual, auto. Configuration example:

$("#slider").muslider({
	"animation": "auto"
});

animationtype (string)

It is the parameter that defines the transition effect: horizontal slide, vertical slide or fade.

Default value: horizontal. Accepted values: horizontal, vertical, fade. Configuration example:

$("#slider").muslider({
	"animationtype": "fade"
});

animationduration (number)

It is the parameter that defines the transition duration (in milliseconds).

Default value: 600. Configuration example:

$("#slider").muslider({
	"animationduration": 800
});

interval (number)

it is the parameter that defines the time interval between slides (in milliseconds). It is active only if the slideshow starts automatically ("animation"="auto").

Default value: 4000. Configuration example:

$("#slider").muslider({
	"interval": 5000
});

Multiple option example

$("#slider").muslider({
	"width": 520,
	"height": 350,
	"animation": "manual",
	"animationtype":"horizontal",
	"animationduration": 500,
	"interval": 5000
});

Contact us