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

Custom Play-Pause and Previous-Next buttons, Circular slides

Fade effects during slide change

Features

  • Responsive (Works on PC, iPad, iPhone and Android Phones)
  • Fully Customizable
  • Customizable UI via CSS
  • Various Callback Function Support
feature

How To Use

Default, inbuilt previous next navigation and play-pause button
<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>
HTML Example
<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>
Custom Play-Pause and Previous-Next buttons, Circular slides
<!-- 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>
HTML Example
<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>
Fade effects during slide change
<!-- 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>
HTML Example
<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>

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

Download

Download the files listed bellow.
Support

For any kind of support for this script please write an email to me support@rudrasofttech.com.

Green Flower Pot
flower
Let's Start A Project

Get a latest creative news from rudrasofttech about art, design and pop - culture.

Request Quote