Slider Revolution Responsive jQuery Plugin

Posted on November 11, 2013 by themepunchtk

Slider Revolution! Responsive jQuery Plugin
The Revolution is here!

Turn simple HTML markup into a responsive(mobile friendly) or fullwidth slider with must-see-effects and meanwhile keep or build your SEO optimization (all content always readable for search engines).

See the heaps of custom transitions/animations for each object on the page! Customize this slider with just a little HTML and CSS to your very needs.

This plugin features tons of unique transition effects, an image preloader, video embedding, autoplay that stops on user interaction and lots of easy to set options to create your own effects. All customization can be handled via jQuery Options, HTML 5 data-attributes and CSS!

Version 4.0 Sky Wood release Date 04.11.2013
jQuery 1.7 – 2.0 Compatible

JQuery-only Version: Slider Revolution Responsive WordPress Plugin
Concrete5 Version: Slider Revolution Responsive Concrete5 Add-On

Layouts like Full Screen, FullWidth – Auto Responsive, Custom Responsive and Static Fixed
Align of Layers with simple Settings
Image and Thumbs fully resizable
Using CSS Animation with FallBack to jQuery
Unlimited Caption Layers
Captions/Layers like Video, Image and html tags can be easily Created
Unlimited Slides
iPhone & Android Swipe Touch enabled
jQuery Conflict free plugin
Customizable 100% via HTML and CSS
Easy installation in your Website
Special Easing
Vimeo & Youtube and HTML5 Video Supported
Full Screen Video with Autoplay function
Stop AutoPlay during Video Playback
Optional Shadows included
Hide Captions Separetely or Together depending on Slider Width
Hide whole Slider Depending on Screen Width
Countless Art of Transitions
10+ Different Caption Animation Types
20+ Differen Slide Transition, and Unlimited Variations due Rotation and Amount of Slots
Two Level Animations of Captions. Start Time, End time, Different Animation Type and Easing at Start and End
Public Api, like stop & start, next,prev, jump to slide. Events at video play, start and stop, events at slide change..
Lazy Load function
Navigation Skins, Align, position,s offset of navigation elements easy customizeable
Sharp Edged of BG Caption Backgrounds Automatically calculated
Helper functions, like scroll under slider, rekurisve depth of responsivity etc. included

Recommendation #1

If you want to use the RevSlider in your Theme here on ThemeForest too please purchase
1 extended license for each theme (as long as there is no Developer License available) you put on the marketplace! If you have questions about this agreement please contact us:
http://www.themeforest.net/user/themepunch#from

Frontend Walkthrough http://www.youtube.com/watch?v=J9FroPmOLT0

Version 4.0 Sky Wood Release Date 04.11.2013

New Engine for Transitions and Caption Animations via GreenSock
Introducing Main Image Manipulation like
- background repeat, repeat-x, repeat-y, no-repeat
- background position: left,center,right / top,center,bottom
- background sizing: cover, contain and normal
Introducing new Flat transitions (over 40+)
Introducing new customin and customout Caption Animations
Introducing force fullwidth option, to break boxed containers also
Introducing FullScreen Offset Containers (unlimited list of COntainers which reduce Fullscreen height of Container Dynamically)
Introducing Skew Animations on Captions
Introducing AutoHeight to Increate height of Container linear, no max-height any more
Added new Styles for Captions
Introducing Hide Thumbs on Mobile, Hide Bullets on Mobile, Hide Arrows On Mobile and hide Thumbs Under Resolution options
Linear Downscaling of Thumbnails on Mobile view in case its needed
New Live Guide Documentation
Added New Custom Caption Creator
Added New Live Main Slide Creator (returns li with transition, slots and speed)
Added Video Thumbnails
Fixed some IE8 Bugs
Fixed some IE10 Bugs
Modificated Video Handling

Version 3.0.5 Release Date 02.07.2013

change: fullscreen video is playing now in full Slider.
change: Playing video only stops the current slider, no influence on other slider

Feature: jQuery 2.0 and 1.10

Version 3.0 Release Date 18.06.2013

Feature: jQuery 2.0 and 1.10 Support
Added: Examples like LazyLoad, Aligns, Fullscreen, Fullscreen-with-offsets, html5,vimeo and youtube videos
Feature: HTML5 Video (videoJS) and added data- options like
- data-autoplay=”true”,
- data-nextslideatend=”true”/”false”,
- option added to laod the HTML5 js files via videoJsPath:”rs-plugin/videojs/”
Feature: Shadow now available also in fullwidth mode.
Feature: Navigation Position Anywhere also in FullWidht Mode, even outside the Container
Feature: Lazy Loading function (see Example Lazy Load)
Feature: Horizontal and Vertical Aligns (top,center,bottom, left,center,right) for Captions
Feature: Horizontal and Vertical Offsets for Aligns ( Only works with Aligns together voffset and hoffset)
Feature: FullScreen function (option fullScreen:”on” / “off”)
Feature: Fullscreen Offset Container (option fullScreenOffsetContainer:”#header”)
- i.e. the height of fullscreen slider will be decreased with the height of the #header to fit perfect in the screen !)
Feature: Function to use more then one Transition type per slide (use transition=”fade,slide,paper-cut”).
- In every new loop the next transition typ will be picked. Once the last transition typ reached, it starts the first again
Feature: New function to “scroll page under”
- Use the “tp-scrollbelowslider” class for inside captions with the data-scrolloffset=”xx” data field, to increase/decrease the offset position where to scroll
- Use the API revscroll(offset) for external scroll function
Feature: Function to resize rekursive all Element inside the caption containers.
- Add class tp-resizeme to the container inside the tp-caption and every item within (included the same container) will be responsive resized.
- Only needed if more than one depth exist in the container !
Feature: Function to create “corners” on the captions. Use within the caption simple the
- %lt;div class=”frontcorner”></div>
- %lt;div class=”backcorner”></div>
- %lt;div class=”frontcornertop”></div>
- %lt;div class=”backcornertop”></div>
Feature: Changed Caption Animation from jQuery animation against CSS Animations. Imrpoved speed and techink.
Change: Merged tools and plugin js files in one file. No need to load both any more !
Change: Changed name of “large” button to “default” in setting.css file
New Documentation, With updated data- values
bug fix: Fixed Transition issues with timing and layout. Fullwidth transitions are going to stay in box, and timed well
bug fix: when only one slide exist, and randomrotate animation spped is larger then in animation it broke the caption. Fix is added now.
bug fix: Issues at resizing the containers, where captions moved out of the Container

Version 2.3.9 Release Date 08.04.2013

Bug Fix: more then one Slider on the same page influence the Caption Behaviour. Issue is fixed in this release.
Bug Fix: Safari on pc Slider with links creates huge Memory Leaks. Issue is solved.

Version 2.3.8 Release Date 28.03.2013

Bug Fix: Fullwidth align calculation bug fixed if aspect ratio of container equal to aspect ratio of main image

Version 2.3 – Version 2.3.7 Release Date: 26.03.2013

feautre: deeplink available. i.e. http:/themepunch.revslider.com/index.html#slide1 will link to slide 1. http:/themepunch.revslider.com/index.html#slide3 to slide 3 etc… http:/themepunch.revslider.com/index.html#slide999 will link always to the last slide.
bug fix: fixed IE10 Crash with some Transition
bug fix: Loop,amount of loop, and stop at slide was not working well. Issue is fixed in this verison.

Version 2.3 Release Date: 14.02.2013

feature: added first slide transition, that can be various from the other transitions.
feature: added startWithSlide option
feature: added slide background color or transparent slide options
change: changed option name in navigation type (verticalcentered to solo).
feature: improved navigation and arrows align and offset options, added saparate options for each element.

Version 2.2.4 Release Date: 02.02.2013

Bug Fixed: IE9 Odd Rotation effect at animating the slides. Issue is resolved in this version

Version 2.2.3 Release Date: 28.01.2013

Bug Fixed: IE8 Caption does not disappear at fadeout changed. IE8 Filter added again, some cases it can add an odd halo effect at animationg the png images.

Version 2.2.2 Release Date: 23.01.2013

feature: Events onbeforeswap, onafterswap and onloaded have been added.
bug fix: added database table collation on create table.
bug fix: FF 18 and YouTube Player bugs has been solved. (Black Screen, unclickable buttons)

Version 2.2 Release Date: 18.01.2013

Support: jQuery 1.9.0 Compatibility has been added
New Feature: Method for last played slide and current slide has been added
bug fix: IE8 Static position for Fade effect has been added during the transition

Version 2.1.7 Release Date: 11.01.2013

Added new function to remove event listenres, and timeouts in case markup has been removed.
Added new parameter: data-slideindex front/back (set via slide li) to manage if the full screen slide link should appear under or over the captions.
Bug Fix: Loading of Content was visible during the Loading sequenze

Version 2.1.6 Release Date: 28.12.2012

bug fix: Link to _blank page crashed the Slider.

Release 2.1.4

Added new Feature to set the FullWidth Slides (one by one) vertical centered if needed.
Updated jQuery Transition Plugin to 0.9.9 to resolve the conflicts with isoTope, Foundation and Widgekit plugins

Release 2.1

Added new Feature to Set if One Caption should be Hidden under a predefined Limit (width) of Slide. Helps in Mobile views
Added new Feature to Set if All Caption should be Hidden under a predefined Limit (width) of Slide. Helps in Mobile views. Can be different than Seperately Caption Hide Setting
Added new Feature to Set if Slider itseld should be Hidden under a predefined Limit (width) of Slide.
Lilnk To Slide works now also on Main Image.
Bug Fix: Default Values of Settings

Version 2.1 Release Date: 11.12.2012

feature: added slider hide under some width option (only in Responsive Mode)
feature: added selected captions / all caption hide under some width
feature: added new option for linktoslide per Main Slide also.
feature: End Animation Setting works also at slide swap even if no End time is set.

Release 2.0

Added new Feature to Set End time and speed of Captions
Feature to set different End and Start Transitions of Captions
Use Inside Api to Link inside the Slider ( go prev / next slide, or jump to slide)
New Bullets and Arrows added
New Example Files
Bug Fix for Video Playback
Bug Fix for jQuery UI

Release 1.5

New Transitions like papercut, flyin, 3D curtain, Cube, TurnOff has been added
New Transition Preview Document for easier understanding
Fullscreen Video with AutoPlay added
Timer to Bottom / to Top style has been added
IE9 and IE8 transitions reduced to None CSS3 Transitions
jQery UI 1.9.0 and jQuery 1.8.2 Compatibility
IE8 both Navigation same Time Bug Repaired

Release 1.4.2

API added with methodes like next, prev, maxslide, pause,resume, show and event handling added like slide.changed, video started, video stopped, slide stopped
new Powerfull animation library (transition.js) has been added for better and smoother Transitions
shuffle mode shuffle:”on/off” to randomize the list elements at start
ul/li Lists can be added now in Captions
jQuery 1.72 and jQuery 1.8 Compatibility mode is stable now
IE8 Halo Errors has been repaired (some CPU Heavy animation is automatically replaced with simple animations instead in IE8)
fixed bug if YouTube Player inserted in slide 1
fixed bug at transition fade speed settings
fixed some transparent issues
ficed bug Vimeo API breaks Slider if Froogaloop not loaded – Repaired.

Release 1.3

Bug: Vimeo API breaks Slider if Froogaloop not loaded – Repaired.
Added: YouTube and Vimeo api only loaded if there is any iframe with these videos.
Feature added: Use data-masterspeed attribute in the slides to define different slide transition speed. (Default:300, min: 100 max 2000)
Background Image can be used for Banner now

Release 1.2.1

Feature added : slidehorizontal and slidevertical transitions has been added, where depending on slide order and navigation direction slides moved out to the left / right or to the top or bottom
bug fix: jQuery 1.8 Support has been added

Release 1.2

Feature added: Random Transitions with random Slots can be used now
Bug Repaired: IE8 Thumbnail Hover shows only white Box
Hardened: If Container has no height, default grid height will be set automatically by loading

Update 28th of June 2012

Removed the ”.fullwidthbanner” style from the fullwidth.css file. It had a typofailure and had negative Influence to the fullwidth banner version. Upload is in the queue already.
IE7 and IE8 bug has been repaired by slot slide, slot fade and boxfade transitions. IE7 and IE8 will automatically play slotzoom or boxslide instead

WordPress Themes by ThemePunch

Components by ThemePunch

Slider Revolution Responsive WordPress Plugin

Posted on November 10, 2013 by themepunchtk

Slider Revolution! Responsive WordPress Plugin
The Revolution is here!

Create a responsive(mobile friendly) or fullwidth slider with must-see-effects and meanwhile keep or build your SEO optimization (all content always readable for search engines). See the heaps of custom transitions/animations for each object on the page! Customize this slider with our convenient drag&drop backend to your very needs.

This plugin features tons of unique transition effects, an image preloader, video embedding, autoplay that stops on user interaction and lots of easy to set options to create your own effects.

Version 4.0 SkyWood release Date 04.11.2013
WordPress 3.7 Ready
jQuery 1.7.x – jQuery 1.10.x and jQuery 2.+ Compatible

How to update the Plugin in your WP Installation ?

jQuery-only Version: Slider Revolution Responsive jQuery Plugin
Concrete5 Version: Slider Revolution Responsive Concrete5 Add-On

The Technology behind Slider Revolution

CSS Transitions with jQuery FallBack
Fully Responsive (Optional) & Mobile Specific Features
jQuery 1.7 – jQuery 2.x Supported
Lightning Fast Greensock Animation Engine NEW
Powerful API to Stop, Play, Swap Slides, etc.

General Slider & Editor Capabilities

All Sizes Possible: Custom, Auto-Responsive, Full-Screen
Variable or Fixed Image Height
Image BG Cover, Contain, Tiling, Alignment, etc. NEW
Custom Image Alt Tag for SEO NEW
WYSIWYG Drag & Drop Editor with “Lock” Feature
Easy Caption Alignment
Published / Unpublished Slides NEW
Lazy Loading for Quicker Slider Start
Set Per Slide Link and Target
Fullscreen YouTube , Vimeo and
Self-Hosted HTML5 Videos
Auto-Start for Videos On / Off
Optional Shadow GFX below Slider

Slide Navigation

Bullet, Button, Thumbnail Navigation
Mobile Touch Enabled (Optional)
“Stop Slide Timer on Hover” Function
Video Playback stops Timer
Auto-Hiding of Navigation with Delay Option
Optional Countdown Timer Line
Set the Position of Time Line
Set Size and Number of Visible Thumbs
Hide / Enable Navigation on Mobile Devices
Keyboard Navigation NEW

WordPress Goodies

Import / Export Sliders
Post Based Sliders
Multi Language Support (WPML, .po, .mo)
Multi Site (WPMU) Supported
User Role Management
Embed Plugin Library only when needed NEW

Captions

Transition Builder: Huge Number of Possible Transitions
Set Start / End Time and Speed of Captions
Separate In / Out Transitions with Rotation, Scale, Skew, Opacity, Perspective, etc. NEW
Add Unlimited Number of Captions
Youtube, Vimeo, Self-Hosted HTML5 Videos as Caption
Set link per Captions
Option to Link to a Specific Slide via Caption
Variable Caption Image Size
Option to Hide Captions on Mobile Devices

Slide Transitions

WYSIWYG Drag & Drop Editor
Easy Caption Alignment
Huge Variety of Basic, Flat, 3D Transitions
Customizable Transition Speed (Individual / Global)

Read a detailed review about this WordPress Plugin over at WPMU.org
http://wpmu.org/revolution-slider-a-premium-drag-and-drop-slider-for-wordpress/
and at WPExplorer.com
http://www.wpexplorer.com/revolution-slider-review-guide/

“Revolution Slider is an all around awesome plugin, and would be a solid addition to any site.”
(WPExplorer)

”…all I can say is WOW. I can honestly say that I haven’t had as much fun with, or been blown away by the quality and experience of any plugin/slider/website building tool in…ever??”
(Webdsignandsuch.com – “A look at the Revolution Slider – Steve Jobs would be proud”)

“This is my favourite Slider plugin right now – props to Theme Punch for bringing us this one.”
(Blogging Wizard)

“I thoroughly enjoyed testing and using this plugin, and highly recommend it to all those of you who are looking for a slider plugin, especially if you plan to include some layer-based animation features to your slides.”
(WP Mayor)

Recommendation #1

Used in Current Top 3 Selling Themes on ThemeForest

More Great Usage Examples

Example Videos

Slider Installation & First Steps http://www.youtube.com/watch?v=cVleysEPHM4
Frontend Walkthrough http://www.youtube.com/watch?v=J9FroPmOLT0
Easy Slider Creation http://www.youtube.com/watch?v=fCgspm_GaP8
Screencast showing how easy it is to work with our Revolution WordPress Slider: http://www.youtube.com/watch?v=2aJyzmFBEHc via RubenBristian for his Ikaros Theme

Using it with Thesis 2.0

Thesis 2.0 Box for the Revolution Slider http://goo.gl/fb/Uf0Ru (Article from http://orgspring.com )

Version 4.0 Sky Wood Release Date 04.11.2013

Introducing

New Live Style Editor (Simple and Advanced)
Custom Caption Creator
Introducing: Live Caption Animation Viewer in Editor
Introducing: Export Feature (with Images and Static/Dynamic Styles and with Custom Animations)
Introducing: New Main Image Aligns, Repeating and Sizing (like center,center, repeat-x,y,no, cover and container and many more)
Introducing: New Layout Viewer ( to see differences between, fullwidth, fullscreen, custom)

Features

Only Styles are loaded which used in Current Slides
Feature: template slider for post slider added
Feature: allow external images as slide backgrounds
Feature: new options for videos
Feature: many other new options added
Feature: added relpace url’s neer export / import slider
Feature: new options for hiding thumbs/bullets/arrows on mobile
Feature: new option force fill width in autoresponsive mode
Feature: id, class, rel tag can be set for each element
Feature: alt tag for images can be set
Feature: layers can now be locked
Feature: layer images can now be resized
Feature: Added new Flat Transitions
Feature: Added FullScreen and FullWidth Forcing in Boxed Themes
Feature: Added Thumbnail for Videos
Feature: Tooltip for Titles
Feature: Shadow Prelayouts
Feature: Move Tabs to Change Slide Order
Feature: Published / Unpublished Slides also Date / Time Dependent
Feature: Loop and Controlless HTML5 Videos
Feature: Play Video only First Time, then Hold
Feature: Linear Resizing of Thumbs
Feature: Unlimited Containers for Offsetting Fullscreen Height

Changes:

Change: Style of Backend in Flat Style
Change: Much cleaner interface
Change: Load Plugins and Revolution Slider splitter, dependent on Other Plugins
Change: Jquery.themepunch.revolution.min.js loads now in the footer (Optional)
Change: Main transitions are now listed in flat and premium transitions

Bug Fixs:

Bug fix: many small/mayor bug fixes
Bug fix: added error messages on some situations in slider by post view.
Bug fix: fixed css bug that made the screens overlap with wordpress error messages
Bug fix: fixed image positioning in edit layers js file
Bug fix: fixed images url’s output in https websites

Version 3.0.93 Release Date 15.08.2013

Features:

tooltips now have an i icon for better recognition
slide tabs can now be dragged, to change the order of them, in the slide edit interface
slide tabs have now the title as name for better identification
two new fields to publish/show slides only between a interval
feature: added language filter for the slides.

Bug Fix:

grid list shows up correctly now on slider creation
change youtube dialog api url to https. It was not shown in https websites.
get back the hide layer under width option. It was lost in the last update.
disabled the admin validation in the backend
normalized widget output

Version 3.0.8 Release Date 06.08.2013

bug fix: buggy upscaling of Images at Lazy Loading in FullWidth Layout fixed

Version 3.0.7 Release Date 03.08.2013

modification: added WP 3.6 Support