Responsive jQuery Slideshow/Slider Plugin - Juicy Slider

Juicy Slider is a lightweight and fast jQuery plugin that allows you to create responsive, cross-browser and highly configurable slideshows & sliders on your website.

Basic Usage:

1. Include jQuery Juicy Slider CSS file in the header

<link rel="stylesheet" href="css/juicyslider.css" type="text/css" />

2. Create the html

<div id="demo" class="juicyslider">
<ul>
<li><img src="data/1.jpg" alt=""></li>
<li><img src="data/2.jpg" alt=""></li>
<li><img src="data/3.jpg" alt=""></li>
</ul>
<div class="nav next"></div>
<div class="nav prev"></div>
<div class="mask"></div>
</div>

3. Include jQuery library and jQuery Juicy Slider script on the page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script type="text/javascript" src="js/juicyslider.js"></script> 

4. Include jQuery UI library for transition effects (Instead of CSS3 transitions that don't support old browsers)

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 

5. Call the plugin with options

<script type="text/javascript">
$(function() {
$('#demo').juicyslider({
mode: "cover", // "cover" or "contain"
width: '100%',
height: 400,
mask : 'none', // "raster", "square", "strip" or "none"
autoplay: false, // true or false
shuffle: true, // set true to shuffle the picture order
show: {effect: 'fade', duration: 1500},     // effect params refer to jQuery UI
hide: {effect: 'fade', duration: 1500},     // try 'puff' or 'drop' for the effect arg
});
});
</script>

---

This awesome jQuery plugin is developed by vanting. For more Advanced Usages, please check the demo page or visit the official website.