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.