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

This article describes how to create a banner carousel with jQuery's Slick plugin. 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 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.