Responsive jQuery Image Slider with Amazing Visual Effects - WOW Slider
File Size: | 189 KB |
---|---|
Views Total: | 8552 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
WOW Image Slider is a powerful and beautiful jQuery plugin that helps you easily generate delicious slideshows with gorgeous transition effects, in a few clicks without writing a single line of code.
Features:
- Fancy templates
- Awesome transitions
- Cross Browser
How to use it:
1. Include jQuery library and WOW Image Slider theme CSS in the head section of your page
<link rel="stylesheet" type="text/css" href="styles/style.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
2. Markup Html Structure
<div id="wowslider-container"> <div class="ws_images"> <ul> <li><a href="#"><img src="images/slide1new.jpg" alt="" title="" id="wows_0"/></a></li> <li><a href="#"><img src="images/slide2new.jpg" alt="" title="" id="wows_1"/></a></li> <li><a href="#"><img src="images/slide3new.jpg" alt="" title="" id="wows_2"/></a></li> </ul> </div> <div class="ws_bullets"> <div> <a href="#" title=""><img src="tooltips/slide1new.jpg" alt=""/>1</a> <a href="#" title=""><img src="tooltips/slide2new.jpg" alt=""/>2</a> <a href="#" title=""><img src="tooltips/slide3new.jpg" alt=""/>3</a> </div> </div> <a href="#" class="ws_frame"></a> <div class="ws_shadow"></div> </div>
3. Include wowslider.js and then call the plugin with options
<script type="text/javascript" src="../wowslider.js"></script> <script type="text/javascript"> jQuery("#wowslider-container").wowSlider({ prev: "", next: "", duration: 1000, delay: 20 * 100, width: 960, height: 360, controls: true, autoPlay: true, bullets: true, }); </script>
Change Log:
v8.1.0 (2015-05-13)
- Features update and bugs fix.
This awesome jQuery plugin is developed by WOWSlider. For more Advanced Usages, please check the demo page or visit the official website.