Revolution Slider

Revolution Slider

Canvas bundles Slider Revolution, a separate premium slider plugin from ThemePunch, as an included extra. It is a heavier, layer based slider aimed at complex animated hero sections, and it is fully independent from the lightweight Canvas Slider. You are free to use it or ignore it in favor of the built in slider.

What is included

The plugin lives under include/rs-plugin/ in the package. Its assets are loaded separately from the core theme:

<link rel="stylesheet" href="include/rs-plugin/css/settings.css" media="screen">
<link rel="stylesheet" href="include/rs-plugin/css/layers.css">
<link rel="stylesheet" href="include/rs-plugin/css/navigation.css">

<script src="include/rs-plugin/js/jquery.themepunch.tools.min.js"></script>
<script src="include/rs-plugin/js/jquery.themepunch.revolution.min.js"></script>

Optional extensions add features like video, layer animation, Ken Burns, and slide animations:

<script src="include/rs-plugin/js/extensions/revolution.extension.video.min.js"></script>
<script src="include/rs-plugin/js/extensions/revolution.extension.slideanims.min.js"></script>
<script src="include/rs-plugin/js/extensions/revolution.extension.layeranimation.min.js"></script>
<script src="include/rs-plugin/js/extensions/revolution.extension.kenburn.min.js"></script>

Markup

A Revolution Slider uses a rev_slider_wrapper container with an inner rev_slider element. Ready made demos are provided such as slider-revolution.html, slider-revolution-fullwidth.html, slider-revolution-kenburns.html, and slider-revolution-html5-videos.html.

<div id="rev_slider_579_1_wrapper" class="rev_slider_wrapper fullscreen-container" data-alias="default-slider" style="padding:0px;">
	<div id="rev_slider_579_1" class="rev_slider fullscreenbanner" style="display:none;" data-version="5.1.4">
		<ul>
			<!-- one <li> per slide, each holding layers -->
		</ul>
	</div>
</div>

Initialization

Revolution Slider is initialized with a jQuery call on the slider id. Each demo ships with its own init block that sets layout, timing, navigation, and parallax. A trimmed version looks like this:

<script type="text/javascript">
	var revapi202;
	jQuery(document).ready(function() {
		if (jQuery("#rev_slider_579_1").revolution == undefined) {
			revslider_showDoubleJqueryError("#rev_slider_579_1");
		} else {
			revapi202 = jQuery("#rev_slider_579_1").show().revolution({
				sliderType: "standard",
				jsFileLocation: "include/rs-plugin/js/",
				sliderLayout: "fullscreen",
				delay: 9000,
				responsiveLevels: [1140, 1024, 778, 480],
				gridwidth: [1140, 1024, 778, 480],
				gridheight: [728, 768, 960, 720],
				navigation: {
					arrows: { style: "hermes", enable: true }
				}
			});
		}
	});
</script>

Key options in the init:

• sliderType is usually standard.
• jsFileLocation must point at include/rs-plugin/js/.
• sliderLayout is fullscreen for a full viewport slider or fullwidth for a full width, fixed height slider.
• gridwidth and gridheight define the design grid used to position layers across breakpoints.
• responsiveLevels sets the breakpoints at which the responsive grid switches.

Tips

• Treat Revolution Slider as a separate plugin. Its CSS and JS are loaded only on pages that use it, so do not add its assets globally unless needed.
• The fastest path is to copy one of the slider-revolution-*.html demos and edit its slides and layers, rather than writing an init from scratch.
• Keep jsFileLocation correct relative to your page, or the plugin will fail to load its runtime files.
• For most simple hero sections the built in Canvas Slider is lighter and easier. Reach for Revolution Slider when you need layered, timeline based animations.