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