Muslider - jQuery content slider

μslider is the jQuery content slider and it has the "swipe touch" support for mobile/touch devices! It's very easy to use because it has a few essential options that can be configured straightforwardly. 

You can set up:

• the functioning style (responsive or not)
• the slider height and width (non responsive mode) or
• their ratio
• how to start the animation (manually or automatically)
• the transition effect (horizontal slide, vertical slide or fade)
• the animation duration
• the time interval between slides (if the animation starts automatically)

μslider can slide anything:

• images (with or without caption and "lazy" load)
• text
• audio & video via HTML5 <audio> and <video> (complete native support)
• audio & video via Vimeo and YouTube (complete support by downloading a little patch)
• iframes

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

1. INCLUDE CSS AND JS FILES

<!-- 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>

2. 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>

3. 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;
}

4. JAVASCRIPT

$(document).ready(function(){
	$("#my_slider").muslider();
});

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