Easy & Responsive jQuery Slider Plugin - wmuSlider

File Size: 14.8KB
Views Total: 7917
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Easy & Responsive jQuery Slider Plugin - wmuSlider

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.