How to use μslider

Warning! This section was deeply modified for μslider v.2.0

Basic HTML

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

<div id="my_slider" class="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" />
		<!-- note: if "title" is empty no caption will be shown -->
	</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" />
	</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 classes -->
		
		<span class="prev"><img src="path/image/prev.jpg" alt="prev" title="prev" /></span>
		<span class="start"><img src="path/image/start.jpg" alt="start" title="start" /></span>
		<span class="stop"><img src="path/image/stop.jpg" alt="stop" title="stop" /></span>
		<span class="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 "data-src" -->

<div class="slide">
	<img src="path/image/placeholder.jpg" data-src="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 <div> has an ID, class "youtube" and a data-src attribute with the video ID -->
	
	<div id="player2" class="youtube" data-src="video_id">
	</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-last.min.js" ></script>

<!-- your μslider version -->
<script type="text/javascript" src="path/js/jquery.muslider-2.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-1.0.min.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-1.0.min.js" ></script>	

Basic inizialization

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

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

Configurable options

Parameters for dimensions control

responsive (boolean)

Boolean parameters that defines if the slider must be responsive or not.

Default value: "yes". Accepted values: "yes", true, 1; "no", false, 0. How to set:

$("#my_slider").muslider({
	"responsive": true
});

ratio (integer, string)

It defines the ratio between height and width of the slider.

Default value: 0.5625 (that corresponds to a 9:16 ratio between height and width). Accepted values: float numbers; "default", "reference", "maximum", "initial", "continuous", "adjust". How to set:

$("#my_slider").muslider({
	"ratio": "adjust"
});

Meaning of ratio values:

• float numbers: numerical value of the ratio between height and width of the slider that you want to set
• "default": Default value (0.5625) that is height / width of 9:16
• "reference": ratio value will be calculated from two additional parameters ("reference_height" and "reference_width", see below) that are respectively the height and width of a reference image
• "maximum": ratio value will be calculated from two additional parameters ("maximum_height" and "maximum_width", see below) that are the maximum acceptable height and width for the slider
• "initial": ratio value will be calculated from the initial height and width values of the window
• "continuous": ratio value will be calculated from the real time height and width values of the window (warning! Content can be deformed)
• "adjust": ratio value will be calculated from the height and width of the content of the current slide (if it is an image); this is the only "ratio" value that can be set also in non responsive mode

width (integer, string)

The width of the slider, accepts numerical values (in pixels) or a percentual velue ("80%").
It is mandatory and must be an integer if "responsive": "no". Default value: "100%". How to set:

$("#my_slider").muslider({
	"responsive": "no",
	"width": 600
});

height (integer, string)

The height of the slider, accepts numerical values (in pixels) or a percentual velue ("70%").
It is mandatory and must be an integer if "responsive": "no" and "ratio" is not "adjust" or is not set. Default value: "100%". How to set:

$("#my_slider").muslider({
	"responsive": "yes",
	"height": "50%"
});

reference_width (integer)

The width of the reference image, accepts numerical values (in pixels). It is compulsory if "ratio": "reference".

Default value: 0. How to set:

$("#my_slider").muslider({
	"ratio": "reference",
	"reference_width": $my_reference_image.width();
});

reference_height (integer)

The height of the reference image, accepts numerical values (in pixels). It is compulsory if "ratio": "reference".

Default value: 0. How to set:

$("#my_slider").muslider({
	"ratio": "reference",
	"reference_height": 480
});

max_width (integer)

The maximum acceptable slider width, accepts numerical values (in pixels). It is compulsory if "ratio": "maximum".

Default value: 0. How to set:

$("#my_slider").muslider({
	"ratio": "maximum",
	"max_width": 1200
});

max_height (integer)

The maximum acceptable slider height, accepts numerical values (in pixels). It is compulsory if "ratio": "maximum".

Default value: 0. How to set:

$("#my_slider").muslider({
	"ratio": "maximum",
	"max_height": 700
});

min_width (integer)

The minimum acceptable slider width, accepts numerical values (in pixels).

Default value: 320. How to set:

$("#my_slider").muslider({
	"min_width": 460
});

min_height (integer)

The minimum acceptable slider height, accepts numerical values (in pixels).

Default value: 180. How to set:

$("#my_slider").muslider({
	"min_height": 300
});

Parameters for animation management

animation_start (string)

It determines how the animation will start: manually or automatically.

Default value: manual. Valori accettati: manual, auto. How to set:

$("#my_slider").muslider({
	"animation_start": "auto"
});

animation_type (string)

It determines the kind of animation: horizontal slide, vertical slide or fade.

Default value: horizontal. Valori accettati: horizontal, vertical, fade. How to set:

$("#my_slider").muslider({
	"animation_type": "fade"
});

animation_duration (integer)

It defines the animation duration (in milliseconds).

Default value: 600. How to set:

$("#my_slider").muslider({
	"animation_duration": 800
});

animation_interval (integer)

Is active only if "animation_start": "auto", its the time interval between slides (in milliseconds).

Default value: 4000. How to set:

$("#my_slider").muslider({
	"animation_start": "auto",
	"animation_interval": 3000
});

Example with multiple options

$("#my_slider").muslider({
	"responsive": "yes",
	"ratio": 0.5,
	"width": "80%",
	"height": "80%",
	"animation_start": "manual",
	"animation_type": "horizontal",
	"animation_duration": 500,
	"animation_interval": 5000
});

Contact us