jQuery Any Content Slider Plugin - muslider
| File Size: | 1.15 MB |
|---|---|
| Views Total: | 1598 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
µ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.











