Use ThemePunch's Revolution Slider control on CMS web pages

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.