SlideShow

Responsive jQuery SlideShow Plugin

A responsive slideshow jQuery plug-in with features like touch, CSS3 transitions and callback api.

Examples

Default, inbuilt previous next navigation and play-pause button
HTML 
<div class="rst-slides" id="example1" style="width: 100%; height: 400px;">
        <div class="rst-slide" style="height: 100%; background-color: #696969; background-image: url(pic1.jpg);"> </div>
        <div class="rst-slide" style="height: 100%; background-color: #657932; background-image: url(pic2.jpg);"> </div>
        <div class="rst-slide" style="height: 100%; background-color: #E13C38; background-image: url(pic3.jpg);"> </div>
    </div>
Script 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
    <link href="slides.css" rel="Stylesheet" />
    <script src="slides.js" type="text/javascript"></script>
    <script src="swipe.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#example1").slides();
        });
    </script>
Custom Play-Pause and Previous-Next buttons, Circular slides
HTML 
<div class="rst-slides" id="example2" style="width: 100%; height: 400px;">
        <div class="rst-slide" style="height: 100%; background-color: #696969; background-image: url(pic1.jpg);"> </div>
        <div class="rst-slide" style="height: 100%; background-color: #657932; background-image: url(pic2.jpg);"> </div>
    <div class="rst-slide" style="height: 100%; background-color: #E13C38; background-image: url(pic3.jpg);"> </div>
    </div>
    <i class="icon-chevron-left"></i><i class="icon-play"></i><i class="icon-pause"></i><i class="icon-chevron-right"></i>
Script 
<!-- Include same files from first example -->
    <script type="text/javascript">
        $(document).ready(function () {
           $("#example2").slides({ Circular: true,
                NextHandle: $(".icon-chevron-right"),
                PrevHandle: $(".icon-chevron-left"),
                PlayHandle: $(".icon-play"),
                PauseHandle: $(".icon-pause")
            });
        });
    </script>
Fade effects during slide change
HTML 
<div class="rst-slides" id="example3" style="width: 100%; height: 400px;">
        <div class="rst-slide" style="height: 100%; background-color: #696969; background-image: url(pic1.jpg);"> </div>
        <div class="rst-slide" style="height: 100%; background-color: #657932; background-image: url(pic2.jpg);"> </div>
        <div class="rst-slide" style="height: 100%; background-color: #E13C38; background-image: url(pic3.jpg);"> </div>
    </div>
Script 
<!-- Include same files from first example -->
    <script type="text/javascript">
        $(document).ready(function () {
            $("#example3").slides({ NextHideAnimate: { Effect: 'fade', Props: { direction: '' }, Interval: 1000 },
                PrevHideAnimate: { Effect: 'fade', Props: { direction: '' }, Interval: 1000 },
                NextShowAnimate: { Effect: 'fade', Props: { direction: '' }, Interval: 2000 },
                PrevShowAnimate: { Effect: 'fade', Props: { direction: '' }, Interval: 2000 }
            });
        });
    </script>

Features

  1. Responsive (Works on PC, iPad, iPhone and Android Phones)
  2. Fully Customizable
  3. Customizable UI via CSS3
  4. Various Callback Function Support

Usage Options

Option Default Description
ItemSelector '.rst-slide' jQuery Selector

Helps plugin to identify individual slide.

AutoPlay true true | false
AdjustHeight true true | false

Adjust height of slideshow to current visible slide.

StartSlide 0 slide index

indicates starting slide of slideshow

ScrollInterval 5000 milliseconds

Time interval between slide change

NextHideAnimate 
{ Effect: 'slide', 
Props: { direction: 'right' }, 
Interval: 1000 }

Hide effect while moving to previous slide

PrevHideAnimate 
{ Effect: 'slide', 
Props: { direction: 'left' }, 
Interval: 1000 }

Hide effect while moving to next slide

NextShowAnimate 
{ Effect: 'slide', 
Props: { direction: 'left' }, 
Interval: 1000 }

Show effect while moving to next slide

PrevShowAnimate 
{ Effect: 'slide', 
Props: { direction: 'right' }, 
Interval: 1000 }

Show effect while moving to previous slide

HoverPause false false | true

Slideshow will not play while mouse is over it, if this option is set to truek

Circular false false | true

Slideshow will move to first slide after last slide, if this option is set to true

NextHandle null $("#anyitem")

Override default next button

PrevHandle null $("#anyitem")

Override default previous button

PlayHandle null $("#anyitem")

Override default play button

PauseHandle null $("#anyitem")

Override default pause button

OnInit null function() {}

callback on slideshow initialization

OnInitComplete null function() {}

callback on slideshow initialization complete

OnPaused null function() {}

callback on slideshow paused

OnChange null function(oldindex, newindex) {}

callback on slideshow slide change

OnStart null function() {}

callback on first slide change

OnEnd null function() {}

callback on first last change

Check these Articles for more examples and help

Download Slideshow Files

  1. slides.css
  2. slides.js