Use ThemePunch's Revolution Slider control on CMS web pages

  • 707 Views
  • Last Post 16 August 2016
dwebb posted this 16 August 2016

ThemePunch's Revolution Slider is included in many Bootstrap themes, and is also available as a standalone plugin. Accelerator CMS static web pages can include slider markup directly, but we also offer support for managing the list of slides as modules in the CMS Webpages tree.

Accelerator does not include a license for ThemePunch Revolution. It must be purchased through a theme or directly from ThemePunch, and the javascript and css files provided by ThemePunch must be deployed with your website.

Markup on the CMS page that includes the slider:

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12">
            <a4dn-revolutionslider id="slider1"
                data-treeroot="Navigation/Sliders/HomePage" 
                data-container-class="rev_slider_wrapper" 
                data-slider-class="rev_slider"
                data-slide-content-field="Banner Carousel">
            </a4dn-revolutionslider>
        </div>
    </div>
</div>

The Bootstrap container, row, and col are used to provide the slider with size constraints; any container that provides a block would do.

The a4dn-revolutionslider element will be replaced with appropriate markup for a Revolution Slider control, along with a javascript initizliation call that passes the data attributes to the plugin. Most of the data attribute names correspond closely to options for Revolution v5 sliders.

  • id: must be a unique identifier on the page. Used to uniquely identify the initialization with the specific slider element.
  • data-treeroot: identifies the Webpages tree element that is the parent of the list of modules to use as slides. "Navigator" is typically the application name used in the CMS Website's System, and is also specified when creating the Webpages module for the website. "/Sliders/HomePage" is the tree branch that you create within the Webpages module to hold the slides. You can use any naming convention that suits your site; this example assumes that all sliders will be defined under /Sliders, and that different sliders might be used on different pages.
  • data-container-class: Must be "rev_slider_wrapper" in order to set options and to auto-generate the initialization call. Bootstrap Themes will typically define a different container class for presets the theme provides.
  • data-slider-class: For auto-generation of the initialization, any class can be used here, to hook into custom CSS you provide. Bootstrap Themes will typically define several slider classes to use for the different presets they offer.
  • data-slide-content-field: Specifies which field the slide content should be pulled from; generally "Banner Carousel" or "Slider Carousel". (Dev note: can also be a property name on module entity or module extension attributes object.)

Markup for individual slides

In the Website Content Managment application for your website, all modules that you add to the Webpages tree have "Banner Carousel" and "Slider Carousel" tabs you can edit in the module's Detail window. When you add a module to the slide list (eg: under /Sliders/HomePage), you have to edit the content in one of these tabs to provide the HTML markup for the slide. The data-slide-content-field specifies which field to use.

NOTE: You can add new modules just for use within the slider, using the "Custom Explorer" module type, or you can add an existing module to make it available in the slider as well as wherever it already exists in the webpages tree. Each module has a single pair of markup tabs, so if you want to use a module in multiple sliders you need to use the same markup for each or use both tabs, except all modules for a slider need to use the same tab. If that's not desired, you must create a new module.

See https://www.themepunch.com/revsliderjquery-doc/slides/ for documentation on the slide markup. You must include the entire <li>...</li> element.

Within the markup, you can use special syntax for urls:

  • src="~/..." or href="~/..."
    • The ~/ will be replaced with the deployment root url for the website. This can be used for links to named CMS pages, the home page "~/", the media url "~/media/...", etc
  • src="a4dn:..." or href="a4dn:..."
    • The ... is typically a filename in the Media Library for the website. The attribute value will be replaced with the full url for the media file, based on the deployment and configuration settings.

Order By: Standard | Newest | Votes
dwebb posted this 16 August 2016

Options when using data-container-class="rev_slider_wrapper"

See https://www.themepunch.com/revsliderjquery-doc/slider/ and https://www.themepunch.com/revsliderjquery-doc/slidersettings/ for full documenation on these options and their defaults if they are not set.

  • data-slider-type: "standard", "hero", "carousel"
  • data-slider-layout: "auto", "fullwidth", "fullscreen"
  • data-gridwidth: not specified, width, or [] enclosed comma-separated list
  • data-gridheight: not specified, height, or [] enclosed comma-separated list
  • data-autoheight: "true" or not specified
  • data-minheight: value or not specified
  • data-responsivelevels: [] enclosed comma-separated list of widths or not specified
  • data-fullscreenoffsetcontainer: not set or selector
  • data-fullscreenoffset: not set or height value
  • data-delay: "9000"
  • data-waitforinit: not set, "true", or "false"
  • data-disableprogressbar: not set, "true" (for on) or false (for off)
  • data-startdelay: not set or milliseconds
  • data-stopafterloops: not set or # loops
  • data-stopatslide: not set or slide #
  • data-viewport-enable: not set or "true"
  • data-viewport-outof: "wait" or "pause"
  • data-viewport-visiblearea: "60%" or percentage
  • data-lazytype: "all", "smart", "single"
  • data-spinner: not set, off, spinner0 to spinner5
  • data-debugmode: not set or "true"

Not Yet Implemented:

  • Extensions settings
  • Fallbacks settings
  • Parallax settings
  • Carousel settings
  • Static Layer settings

Navigation:

The navigation setting for Revolution 5 is a nested javascript object where everything is optional. Rather than try to provide individual data- attributes, a single data-navigation attribute is used to specify the entire navigation setting object. Use double-quotes around the data attribute's value, and use single quotes around string values within the navigation setting. If you need to include quotes inside a value that's surrounded by single quotes (eg: if the value is html markup with attributes) use &quot; for the innermost quotes.

Eg: data-navigation="{ keyboardNavigation: 'on', arrows: { enable: false }, tmp: '<div class=&quot;tp-arr-allwrapper&quot;></div>' }"

dwebb posted this 16 August 2016

Installing Revolution Slider

When using a Bootstrap theme that supports Revolution Slider v5, the slider's CSS and Javascript files will typically be included among the files loaded for the theme.

For standalone usage, see https://www.themepunch.com/revsliderjquery-doc/get-started/#introduction

The specified markup will need to be included in your website's _Layout.cshtml template.

Close