How to use μslider
Warning! This section was deeply modified for μslider v.2.0
Basic HTML
<div id="my_slider" class="slider" >
<div class="slide">
<img src="path/image/img.jpg" alt="alternative text" title="image caption" />
</div>
<div class="slide">
<h1>title</h1>
<h2>subtitle</h2>
<p>paragraph of a random text</p>
</div>
<div class="slide">
<p>text paragraph + image</p>
<img src="path/image/img.jpg" alt="alternative text" title="image caption" />
</div>
</div>
<div class="navslide">
<p>
<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>
</div>
Basic HTML for images "lazy" load
<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
<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>
<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>
<div class="slide">
<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>
<div class="slide">
<div id="player2" class="youtube" data-src="video_id">
</div>
</div>
Basic CSS
.slider {
position: relative;
margin: 0 auto;
padding: 0;
overflow: hidden;
border: 12px solid #fff;
border-radius: 5px;
background: #fafafa;
}
.slide {
position: absolute;
left: 0px;
top: 0px;
}
.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;
}
.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
<link rel="stylesheet" type="text/css" media="screen" href="path/css/muslider_style.css" />
<script type="text/javascript" src="path/js/jquery-last.min.js" ></script>
<script type="text/javascript" src="path/js/jquery.muslider-2.0.min.js" ></script>
<script type="text/javascript" src="path/js/jquery.vimeosupport-1.0.min.js" ></script>
<script type="text/javascript" src="path/js/jquery.youtubesupport-1.0.min.js" ></script>
Basic inizialization
<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
});
Did you like it?
Try also ALS our new jQuery plugin to make any list scrollable!
Try also mlens our jQuery zoom lens.
Try also MCountDown our jQuery countdown
Visit our portfolio on Envato
Check out our new project