Sexy Slider v1.4

SexySlider is compatible and fully tested with Safari 2+, Internet Explorer 6+, Firefox 2+, Google Chrome 3+, Opera 9+.

Features

• Auto slide
• Continuous sliding
• Image captions
• Flexible configuration
• 6 transitions effects

Documentation

This plugin is really easy to use. After you download the plugin add the following lines between the HEAD tag on your page:

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.sexyslider.min.js"></script>

Next all you have to do is create a wrapper with some ID and put the next code below it:

$('#wrapper').SexySlider();

The above code will take all images from the div 'wrapper' and will create the slider. If you want to comment below images just add text in alt tag.

<div id='wrapper'>
  <img src='image1.jpg' />
  <img src='image2.jpg' alt='description' />
  <img src='image3.jpg' />
</div>

You have 6 predifined effects that you can use:

• Wave
• Curtain
• Zipper
• Fountain
• Cascade
• Fade
• or only "Random"

Things you can customize: (With their default values)

navigation    : '#idnavigation', // #id of div to place navigation buttons.
control       : '#idcontrol',    // #id of div to place control buttons.
width         : 500,  // width of panel
height        : 332,  // height of panel
strips        : 20,   // number of strips
auto          : true, // autoslider
autopause     : true, // stop autoslider after click
delay         : 3000, // delay between images in ms
stripSpeed    : 500,  // delay beetwen strips in ms
titleOpacity  : 0.7,  // opacity of title
titleSpeed    : 1000, // speed of title appereance in ms
titlePosition : 'bottom', // top, right, bottom, left
titleStyle    : 'auto', // 'auto', false 
direction     : 'alternate', // left, right, alternate, random
effect        : 'random' // curtain, zipper, wave, fountain, cascade, fade, random

Example

HTML:

<div id="slider">
  <img src="assets/slide_1.jpg" alt="" />
  <img src="assets/slide_2.jpg" alt="" />
  <img src="assets/slide_3.jpg" alt="" />
  <img src="assets/slide_4.jpg" alt="" />
  <img src="assets/slide_5.jpg" alt="" />
</div>

<div id="navigation"></div>

<div id="control"></div>

CSS:

#navigation a
{
  padding:10px;
  background:#d60c62;
  color:#FFFFFF;
  text-decoration:none;
}

#navigation a.sexyslider-prev
{
  float:left;
}

#navigation a.sexyslider-next
{
  float:right;
}

#control a
{
  background:#f385a2;
  padding:0 3px;
  color:#FFFFFF;
  margin-left:3px;
}

#control a.active
{
  background:#d60c62;
}

JS:

<script type="text/javascript">
  $(document).ready(function(){
    $('#slider').SexySlider({
      width  : 500,
      height : 332,
      strips : 20,
      delay  : 5000,
      effect : 'random',
      direction: 'random'
    });
  });
</script>