Revolution Responsive Jquery Slider

Posted on |

This chapter will gives you general instructions on how to install the slider and setup the options. Later chapters will be more detailed if needed.

What files do I need to upload to my server?

Please upload the rs-plugin folder to your server. In this folder you will find the following subfolders containing all of the items content:

Issues for Slider Revolution Responsive jQuery Plugin. To avoid duplicates, please search before submitting a new issue. Advanced search. 4 open, 6 total. 1 open, 1 total. Response rate% 1st response. 2 year graph, updates weekly. Slider Revolution will adjust its size and the size of its content automatically. But similar to responsive websites, content often looks best when its setup specifically for multiple devices. Grid Width & Grid Height. LayerSlider Responsive jQuery Slider Plugin. LayerSlider is an advanced Responsive jQuery Slider Plugin with the famous Parallax Effect and hundreds of transitions! You can use LayerSlider to create a breathtaking Image Slideshow, Banner Rotator or Content Slider to your site! It is SEO and mobile friendly, it has tons of features and customizable options.

  • js
  • css
  • assets

You could use your own jQuery but we recommend loading it directly from the Google ressources (see later in this documentation).

You will find many examples in your downloaded zip under the examples&sources folder..

Implement the jQuery

Add the following lines to your HTML Head:

Add Revolution js and css files to your HTML page

This contains the JS and CSS for the Slider itself and some helping modules .

Create a Container for the Banner

Put it in the HTML: (the class names used here are only examples. In our Example files we called them banner-container, fullwidthbanner-container and fullscreenbanner-container, different then here below ! )
Jquery
The Banner-container can have different Styling depending on that, which layout you wish to use.
Responsive Style

This Style allows you to creat predefined container sizes, undependent from sourrounding container, and create Medai Query (Browsr Size) Dependent responsive alterantives.

It requests

  • a container with predefined Width and Height Attributes,
  • Media Query dependent Sizing. - this should be always with the same proportion. Means Width/Height should always have the same result !!!

Put this in your CSS File (i.e) :

FullWidth Style

This Style allows you to have the banner always fit in the maximum width of the Sourrounding Container.

It requests:

  • a Fluid wrapping container (which will always change the size depending on browser size. I.e. width:100% etc..

Put this in your CSS File

FullScreen Style

This Style allows you to have a banner always fit in the maxium screensize. In Some option you can select containers which will reduce the height of the banner with the height of the container. See examples.

It requests:

  • a fullwidth and fullheight wrapping container
Image

Put this in your CSS File

Create Your First Slides

Create an Unordered list inside the banner container where each <li> element will correspond to one slide.

Call the jQuery Plugin to build the Slider (Options need to be set of course...)

The Documentation

Free
  • Created: 06/22/2012
  • latest Update: 06/28/2012
  • By: ThemePunch
  • Email: info@themepunch.com

For support please checkout http://themepunch.ticksy.com !

Install

This chapter will gives you general instructions on how to install the slider and setup the options. Later chapters will be more detailed if needed.

00 What files do I need to upload to my server?

Please upload the rs-plugin folder to your server. In this folder you will find the following subfolders containing all of the items content:

  • js
  • css
  • assets

You could use your own jQuery but we recommend loading it directly from the Google ressources (see later in this documentation).

You will find an exampleindex.html and index-fullwidth.html in your downloaded zip.

01 Implement the jQuery

Add the following lines to your HTML Head:

02 Add Revolution js and css files to your HTML page

Also in the <HEAD> section:
This contains the JS and CSS for the Slider itself and some helping modules .

03 A Create the surrounding DIV for your Slider (Responsive, none Full Width)

Put it in the HTML:

03 B Create the surrounding DIV for your Slider (Responsive, Full Width Slider)

Put it in the HTML:

04 Put an unordered list inside to hold the different slides as list elements

05 Call the jQuery Plugin to build the Slider

Markup

The items markup uses javascript/jQuery to transform a block of HTML markup into the slider, all customization is done trough the use of HTML5 data attributes and CSS. The markup is valid for HTML5 rules and the content will be fully indexed by search engines. The general structure of markup follows this schema:

01 Two surrounding DIVs are the basic holder for your Slider:

Put it in the HTML for Responsive but none FullWidth version:
Put it in the HTML for Responsive And FullWidth version:
The outside container could be used by one of your divs in your page and is needed for the responsive part.
To get more know about the fullwidth and/or responsive containers, see our style.css examples.

02 An unordered list inside holds the different slides as list elements

The next chapter describes the inner of this list elements.
The more advanced users will have no problems in customizing the slider up to every detail and create their own sliders with using the CSS files.
The CSS file responsible for the layout of your slider is the settings.css. Find All Responsive Settings and Docu later in 'Responsive Captions'.

Layout

01 The Default parameters of the Plugin

  • delay The time one slide stays on the screen in Milliseconds (Default: 9000)
  • startheight Basic Height of the Slider in the desktop resolution in pixel, other screen sizes will be calculated from this (Default: 490) It should be similiar to the settings of the style sheet. If you use a fullwidth banner, ti will deinfe the max. Height of the banner by resizing of the browser. The banner wont ne heigher than this value.
  • startwidth Basic Width of the Slider in the desktop resolution in pixel, other screen sizes will be calculated from this (Default: 890) It should be similiar to the settings of the style sheet. If you use a fullwidth banner, ti will deinfe the max. Width of the banner by resizing of the browser.
  • hideThumbs Time after that the Thumbs will be hidden(Default: 200),
  • navigationType Display type of the navigation bar (Default:'none')
    Options:
    bullet
    thumb ** In Fullwidth version thumbs wont be displayed if navigation offset set to shwop thumbs outside of the container ! Thumbs must be showen in the container!
    none
    both
  • navigationArrows Display position of the Navigation Arrows (Default: 'nexttobullets')
    Options:
    nexttobullets
    verticalcentered ** By navigation Type Thumb arrows always centered or none visible
    none
  • navigationStyle Look of the navigation bullets (Default: 'round')
    Options:
    round
    square
    navbar ** If you choose navbar, we recommend to choose Navigation Arrows to nexttobullets
  • touchenabled Enable Swipe Function on touch devices (Default: 'on')
    Options:
    on
    off
  • navOffsetHorizontal The Bar is centered but could be moved this pixel count left(e.g. -10) or right (Default:0) ** By resizing the banner, it will be always centered !!
  • navOffsetVertical The Bar is bound to the bottom but could be moved this pixel count up (e. g. -20) or down (Default: 20)
  • shadow The Shadow display underneath the banner
    Options:
    0 No Shadow
    1
    2
    3
  • onHoverStop Stop the Timer when hovering the slider
    Options:
    on
    off
  • thumbWidth the basic Width of one Thumbnail (only if thumb is selected. Default:100)
  • thumbHeight the basic Height of one Thumbnail (only if thumb is selected Default 50)
  • thumbAmount the amount of the Thumbs visible same time (only if thumb is selected)
    ** All Thumbs will be hidden in smallest Responsive Level, and in smaller level default size is reseted to 60x30px. Can be modificated in the settings.css file)
  • fullWidth on/off It turns on the Horizontal Centering of Images in FullWidth version. In Case the Image is bigger then the container width, it fits the image with its height in the container and centers horizontally.
  • stopAtSlide -1 or 1 to 999. Stop at selected Slide Number. If set to -1 it will loop without stopping. Only available if stopAfterLoops is not equal -1 !
  • stopAfterLoops -1 or 0 to 999. Stop at selected Slide Number (stopAtSlide) after slide looped 'x' time, where x this Number. If set to -1 it will loop without stopping. Only available if stopAtSlide not equal -1 !

02 Slider items

<li> - Every list item represents a new banner/slider item.
Transition effects and a possible slide link are defined here:
  • data-transition The appearance transition of this slide
    Options:
    boxslide
    boxfade
    slotzoom-horizontal
    slotslide-horizontal
    slotfade-horizontal
    slotzoom-vertical
    slotslide-vertical
    slotfade-vertical
    curtain-1
    curtain-2
    curtain-3
    slideleft
    slideright
    slideup
    slidedown
    fade
    random
    slidehorizontal
    slidevertical
    papercut
    flyin
    turnoff
    cube
    3dcurtain-vertical
    3dcurtain-horizontal
  • data-masterspeed Set the Speed of the Slide Transition. Default 300, min:100 max:2000.
  • data-slotamount The number of slots or boxes the slide is divided into. If you use boxfade, over 7 slots can be juggy.
  • data-link A link on the whole slide pic
  • data-delay A new Dealy value for the Slide. If no delay defined per slide, the dealy defined via Options will be used
  • data-thumb An Alternative Source for thumbs. If not defined a copy of the background image will be used in resized form
Each List item must include:
  • an image <img> as Background Image / Main Image with Data of the thumb
    OR
  • a colored background image AND a coloredbg caption which is full width/height defined !!

Each List item can include:

  • some <div>s containing captions (class='caption'), this could contain embedded video iframes also

03 Captions

Captions are Containers which can be customized via CSS, classes for the start animation and some data options.
The CSS for the caption added in the settings.css file because it depends strongly on the responsive Sizing.
There are 4 Steps of Responsive Contents which are written later below under the Responsive Dependencies Caption.
You find an example in the settings.css of our item download.
The options are in detail:
  • color class example big_white, big_orange, medium_grey (check the style.css of the example for details)
  • animation class
    Options:
    sft - Short from Top
    sfb - Short from Bottom
    sfr - Short from Right
    sfl - Short from Left
    lft - Long from Top
    lfb - Long from Bottom
    lfr - Long from Right
    lfl - Long from Left
    fade - fading
    randomrotate- Fade in, Rotate from a Random position and Degree
  • data-x The horizontal position in the standard (via startwidth option defined) screen size (other screen sizes will be calculated)
  • data-y vertical position in the standard (via startheight option defined) screen size (other screen sizes will be calculated)
  • data-speed duration of the animation in milliseconds
  • data-start after how many milliseconds should this caption start to show
  • data-easing special easing effect of the animation
    Options:
    easeOutBack
    easeInQuad
    easeOutQuad
    easeInOutQuad
    easeInCubic
    easeOutCubic
    easeInOutCubic
    easeInQuart
    easeOutQuart
    easeInOutQuart
    easeInQuint
    easeOutQuint
    easeInOutQuint
    easeInSine
    easeOutSine
    easeInOutSine
    easeInExpo
    easeOutExpo
    easeInOutExpo
    easeInCirc
    easeOutCirc
    easeInOutCirc
    easeInElastic
    easeOutElastic
    easeInOutElastic
    easeInBack
    easeOutBack
    easeInOutBack
    easeInBounce
    easeOutBounce
    easeInOutBounce


04 Videos

In order to embed videos in the slider you can embed videos via iframe of your favorite video site that allows this kind of embedding. An example with Vimeo:

Full Screen Video

In order to play FullWidth Videos, use the class 'fade fullscreenvideo' in the caption where you embeded the iFrame. Use and and and for best effect. The Width and height of the iFrame should be 100% !

In case you wish to use autoplay, just use the parameter in the div where you embeded the iFrame.


05 Banner Timer

In order to use a banner timer, you will need to add the markup within the banner or fullwidthbanner divs.
The use the Timer on the bottom just add the tp-bottom class to the timer like this :
<div></div>
To remove this timer just simple remove the markup from the container, and that is it.

Responsive Basic

Responsive means that the slider will adjust to every screen width.

To achieve that you have to set a bunch of mediaqueries that will adjust the whole slider when a certain window size is used, or you will need to use our fullwidth style version, to let the banner always resize itself.
The basic containers are build like this ( in none Fullwidth, but 4 Level Responsive Version):
The media queries that build the screen dependend container sizes:

Fullwidth

This slider can go fullwidth too. We have added an index-fullwidth.html example for you in the zip.

Please note the basic change in the markup.

The surrounding containers are:

The CSS is not splitted with Media-Queries but has a basic 100% value for width:

API Functions and Events

The slider offers a public API which you can use to control component inside the Slider from within your own scripts. To access this api, use the following code.

You can see in the example index-responsive-API.html how to use the different functions, and how to get the trigered Events.

Once this is done you may use any of the following functions:

  • api.revpause() - Stops the Timer and autoplay
  • api.revresume() - Starts the Timer and resume to autoplay
  • api.revprev() - Change to previous slide
  • api.revnext() - Change to next slide
  • api.revshowslide(n) - Change to the slide with index Nr. (n)
  • api.revmaxslide() - Show the amount of slides

Or you may use any of the following Events:

  • revolution.slide.onchange - Event is triggered when Slide has been rotated
  • revolution.slide.onpause - Event is triggered when Slider is on Pause
  • revolution.slide.onresume - Event is triggered when Slider is back from Pause
  • revolution.slide.onvideoplay - Event is triggered when YouTube or Vimeo Video has been started (only Online Mode !)
  • revolution.slide.onvideostop - Event is triggered when YouTube or Vimeo Video has been stopped or Slide has been rotated (only Online Mode !)
  • revolution.slide.onstop - - Event is triggered when slider has been stopped due the Loop and stop at Slide parameters

Licenses

Jquery Image Slider

Used Assets

Css Responsive Slider

  • Template demo images licensed from Fotolia for preview usage. Please do not attempt to rip the images from the preview!
  • cssAnimate Plugin Great and Simple cssAnimate jQuery Plugin
  • WaitForImages jQuery Plugin

Support

Free Jquery Slider

If you face problems with the installation or customization of our product please do not hesitate to contact us via our support ticket system: