You can create a banner carousel that will display banners alternating on a timely basis for example on your online store's front page.

Introduction

This article looks at creating a banner carousel with the Barebones theme's sliders.js plugin and without it if your online store's theme isn't based on the Barebones theme. However, you can add the sliders.js plugin to your theme even if it does not include other Barebones components.

In the latter section, the jQuery Slick plugin is used to implement the banner carousel. However, you can use any other plugin that's right for you, as the HTML markup in a banner list can be customized flexibly. The Barebones sliders.js plugin also uses the Slick plugin in the background.

Creating a banner carousel with Barebones tools

This section discusses creating a banner carousel by using the sliders.js plugin.

The sliders.js plugin can be found in the default theme's file /scripts/plugins/sliders.js. Additionally, the variables that determine the type of slider are set in the file /scripts/custom.js.

The slider's SASS styles can be found in the default theme's file /styles/scss/modules/_sliders.scss.

The sliders.js plugin also uses the jQuery Slick plugin in the background.

The carousel is created in the same way as product list sliders, meaning that the banner container is given the data-slider="foo" attribute with the desired slider type indicated as its value.

The plugin contains the following types that have been defined for banners:

  • banners-wide
  • banners-side

The example below shows how the banner carousel can be created by using the plugin:

{Banners(
    name: 'group-code',
    before: '<ul data-slider="banners-wide">',
    helper: {{
        <li style="background: url({BannerImageURL});">
            {BannerName(
                before: '<h2>',
                after: '</h2>
            )}
            {BannerText}
        </li>
    }},
    after: '</ul>'
)}

Make sure that the plugin has been initialized in the file /scripts/custom.js. The example below shows how to initialize the plugin for the above markup:

MCF.Sliders.init({
    'banners-wide': {
        autoplay: true,
        autoplaySpeed: 5000,
        slidesToShow: 1
    }
})

You can use all of Slick plugin's settings in the initialization. To find out more about the settings, see Slick's documentation.

Creating a banner carousel without Barebones tools

This section describes how to create a banner carousel with the jQuery's Slick plugin.

The JavaScript examples of this articles use jQuery functions. If you use the scripts described in this article in your own theme, make sure that jQuery has been added to the page.

To add jQuery to a page, use the {SupportScripts} tag.

First, print the banners with the following Interface markup:

{Banners(
    name: 'testiryhma',
    before: '<div class="carousel-container">',
    helper: {{
        <div class="carousel-item">
            <a href="{BannerURL}">
                {BannerImage}
                {BannerText}
            </a>
        </div>
    }},
    after: '</div>'
)}

To add the Slick plugin to a page, place the following tag before closing the </body> tag:

<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>

You can also add Slick's CSS styles to the <head> section of the page in order to save time while working on the banners' layout:

<link rel="stylesheet"type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
<link rel="stylesheet"type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css"/>

Once the plugin's JavaScripts have been added to the page, initialize the Slick plugin in the elements containing the banner carousel with the following code:

$(".carousel-container").slick({
    autoplay: true
});

The autoplay setting sets the carousel to start immediately after the page has loaded. For more information on Slick's settings, see the plugin's documentation. For example, you can adjust the timing of banner rotation or button markup.

In this way, you can get a versatile banner carousel that can be used on any page in your online store. If you have any questions regarding this topic, contact the MyCashflow customer service.