[mōō:slīˈdər] jQuery content slider by musings.it (v.2.0 responsive)

Corna Piana - Bergamo

The Hitch-Hiker's Guide to the Galaxy

Incipit

Far out in the uncharted backwaters of the unfashionable end of the Western Spiral Arm of the Galaxy lies a small unregarded yellow sun.

Orbiting this at a distance of roughly ninety-two million miles is an utterly insignificant little blue-green planet whose ape-descended life forms are so amazingly primitive that they still think digital watches are a pretty neat idea.

This planet has - or rather had - a problem, which was this: most of the people living on it were unhappy for pretty much of the time.

From: Douglas Adams "The Hitch-Hiker's Guide to the Galaxy" (1979)


Example of text as slide content

Dal Passo delle Erbe - Bressanone

Johan Strauss II - Auf der Jagd

Wiener Philarmoniker - Neujahrskonzert - 2010


Example of HTML5 <audio> file as slide content

Antholz lake - Bozen
Ridnaun valley - Bozen
Rodeneck plateau - Bozen
Rosengarten - Bolzano
chiudi apri

Try me!

Yes    No

Responsive management is reached through the ratio between slider height and slider width














manual
auto


horizontal slide
vertical slide
fade





Information

μslider is the jQuery content slider by musings.it.
In the new 2.0 version it is responsive 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:


μslider can slide anything:

Try it in this page with out interactive version!

Versions and license

Version v.2.0 date: 28.02.2014. You can download it for free in three versions: "mini", "hack" and "combo".
μslider is licensed MIT.

Help

If you need help, go on reading the documentation in this page, download the "combo" version with the working demo and the commented code or contact us, we'll be happy to help you.

Customization

Would you like a special or customized μslider version? Contact us and tell us the details of your project, we'll do our best to please you.

Too complicated?

Would you like something more compact and straight? Try out the brand new compact brother of μslider! Minimus slider (mini muslider) born for images.

Downloads

download μslider mini

2.81 kB

μslider "mini"

To be used direct in your production code: light, essential, no frills.

download μslider hack

6.06 kB

μslider "hack"

For those who like to get their hands dirty with the [commented] code.

download μslider combo

both!

μslider "combo"

The complete version: it contains "mini", "hack" and a working demo to start with.


Additional files

Vimeo support

1.09 kB

Vimeo support

.js file for complete Vimeo support.

YouTube support

0.71 kB

YouTube support

.js file for complete YouTube support.


Did you like it?

Help us improve it
Have a look at our projects at musings.it musings.it

Try also ALS our new jQuery plugin to make any list scrollable!

Try also mlens our jQuery zoom lens.


torna su

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:


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

Versions log

28.02.2014 version 2.0 - completely rewritten code; responsive; "wipe-touch"; multi instance; complete support for Vimeo and YouTube videos

01.02.2012 version 1.0 - initial release


Known problems

torna su

Acknowledgements

16.10.2012 μslider was featured on youdevelop.net

31.08.2012 μslider was inserted in week 29 web resources list by weeklywebfood.com

04.07.2012 μslider was featured on spashnology.com

28.06.2012 μslider was featured on website-ontwerpen-blog.nl

28.06.2012 μslider was featured on 2expertsdesign.com

12.05.2012 μslider was included in the scripts library wscript.eu

12.05.2012 μslider was included in the Download.org.vn webscripts database

12.05.2012 μslider was included in the Softpedia webscripts database

09.05.2012 μslider was featured on the japanese blog coliss.com

20.04.2012 μslider was reviewed on caffeh.com

17.04.2012 μslider was featured on jqueryrain.com

17.04.2012 μslider was featured on webcssjquery.wordpress.com

15.04.2012 μslider was featured on creativeproject.wordpress.com

15.04.2012 μslider was featured on gerris.it

15.04.2012 μslider was reviewed on codevisually.com

13.04.2012 μslider was featured on css-weaver.com

10.04.2012 μslider was featured on speckyboy.com


Contact us

Would you like a customization for μslider?

Would you like to report a bug or to suggest a modification?

You liked μslider and want to discuss a project with us?

We'll be happy to have a chat with you!