Responsive jQuery Image Slider with Amazing Visual Effects - WOW Slider

Responsive jQuery Image Slider with Amazing Visual Effects - WOW Slider
File Size: 189 KB
Views Total:
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.