Simple Automatic Image Slider jQuery Plugin - WX-Slider
File Size: | 6.84 KB |
---|---|
Views Total: | 1637 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
WX-Slider is a simple, lightweight jQuery image slider that allows to fade or slide through a list of images with auto-rotation support.
Features:
- Carousel like endless looping.
- Supports both vertical and horizontal slider.
- Fading and sliding transitions effects.
- Custom prev/next navigation controls.
- Transparent bottom caption bar.
- Cross browser and easy to implement.
Basic Usage:
1. Include the jQuery WX-Slider plugin after your jQuery library.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="js/wxSlider.js"></script>
2. Create a list of images for the slider and then wrap the list into the 'wx-slider' container.
<div class="wx-slider"> <ul class="slider-item-list"> <li class="slide"><img src="1.jpg" alt="slide 1"></li> <li class="slide"><img src="2.jpg" alt="slide 2"></li> <li class="slide"><img src="3.jpg" alt="slide 3"></li> <li class="slide"><img src="4.jpg" alt="slide 4"></li> <li class="slide"><img src="5.jpg" alt="slide 5"></li> </ul> </div>
3. Create prev/next navigation for the image slider.
<div class="slide-navigator"> <a href="#" class="navi prev">Prev</a> <a href="#" class="navi next">Next</a> </div>
4. Include the jQuery WX-Slider plugin after your jQuery library.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="js/wxSlider.js"></script>
5. Basic styles for the image slider.
.wx-slider { height: 335px; border: 7px solid white; position: relative; box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.80); -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.80); -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.80); border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; overflow: hidden; } .slider-item-list { margin: 0; padding: 0; } .slider-item-list li { list-style: none; } .slider-item-list .slide, .slider-item-list .slide img { width: 446px; height: auto; position: absolute; z-index: 5; } .slider-item-list .slide.active { z-index: 10; }
6. Style the slider navigation.
.slide-navigator { clear: both; margin: 10px auto; } .slide-navigator .next { float: right; }
6. Style the image caption bar.
.caption-container { color: white; font-size: 24px; position: absolute; z-index: 10; top: 285px; width: 100%; height: 30px; background: rgba(0, 0, 0, .5); padding: 10px 0 10px 10px; }
This awesome jQuery plugin is developed by WhiteX. For more Advanced Usages, please check the demo page or visit the official website.