jQuery Any Content Slider Plugin - muslider

File Size: 1.15 MB
Views Total: 1585
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Any Content Slider Plugin - muslider

µslider (muslider) is a fully custmizable jQuery plugin for creating vertical or horizontal sliders with transition effect for sliding any content. It supports images, text, audio, video, and audio & video from Vimeo and YouTube.

How to use it:

1. Include jQuery library and jQuery muslider on your website

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.musliderEN-1.0.min.js"></script>

2. Include jquery.vimeosupport.js and jquery.youtubesupport.js for Vimeo and YouTube videos support

<script src="jquery.vimeosupport.js"></script>
<script src="jquery.youtubesupport.js"></script>

3. The HTML

<div id="container">

<div class="slide">
...
<div class="slide">
...
<div class="slide">
...
</div>

...

</div>

4. The CSS

#container {
position: relative;
margin: 0 auto;
padding: 0;
overflow: hidden;
border: 12px solid #fff;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background: #f9f9f3;
box-shadow: 0px 0px 10px #555;
}
.slide {
position: absolute;
left: 0px;
top: 0px;
}
.navslide {
position: relative;
margin: 15px auto;
padding: 0;
text-align: center;
}
.navslide p span {
margin: 0px 10px;
cursor: pointer;
}
#start, #stop {
display: none;
}

5. Call the plugin with options

<script type="text/javascript">
$(document).ready(function() 
{
$("#container").muslider({
"animationtype": "horizontal",
"animationduration": 600,
"animation": "auto",
"interval": 6000,
"height": 400,
"width": 880
});

});
</script>

Change log:

v2.0 (2014-02-28)

  • it is responsive and it has the "swipe touch" support for mobile/touch devices! It's 

This awesome jQuery plugin is developed by musings. For more Advanced Usages, please check the demo page or visit the official website.