Easy & Responsive jQuery Slider Plugin - wmuSlider
File Size: | 14.8KB |
---|---|
Views Total: | 7917 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
wmuSlider is an easy and fast jQuery plugin that allows you to create a clean and responsive Carousel / Slider with fade and slide animations.
Features:
- Responsive design
- Clean and neat
- Touch-enabled and mobile friendly
- Supports AJAX image gallery and thumbnails
- Supports slideshow
- Dots and arrows navigations
- Options to customize your slider
Basic Usage:
1. Create the html.
<div class="wmuSlider example1"> <div class="wmuSliderWrapper"> <article> <img src="1.jpg" /> </article> <article> <img src="2.jpg" /> </article> <article> <img src="3.jpg" /> </article> ... </div> </div>
2. The CSS
.wmuGallery .wmuGalleryImage { margin-bottom: 10px; } .wmuSliderPrev, .wmuSliderNext { position: absolute; width: 40px; height: 80px; text-indent: -9999px; background: url(../images/sprites.png) no-repeat 0 0; top: 50%; margin-top: -40px; z-index: 2; } .wmuSliderPrev { background-position: 100% 0; left: 20px; } .wmuSliderNext { right: 20px; } .wmuSliderPagination { z-index: 2; position: absolute; left: 20px; bottom: 10px; } .wmuSliderPagination li { float: left; margin: 0 5px 0 0; list-style-type: none; } .wmuSliderPagination a { display: block; text-indent: -9999px; width: 10px; height: 10px; background: url(../images/sprites.png) no-repeat 0 -80px; } .wmuSliderPagination a.wmuActive { background-position: -10px -80px; }
3. Include jQuery library and jQuery wmuSlider on the page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="../jquery.wmuSlider.js"></script>
4. Call the plugin
<script> $('.example1').wmuSlider(); </script>
5. All the options
<script> $('.example1').wmuSlider({ animation: 'fade', // fade or slide animationDuration: 600, slideshow: true, slideshowSpeed: 7000, slideToStart: 0, navigationControl: true, paginationControl: true, previousText: 'Previous', nextText: 'Next', touch: false, slide: 'article', items: 1 }); </script>
This awesome jQuery plugin is developed by pastawoua. For more Advanced Usages, please check the demo page or visit the official website.