Voit luoda verkkokauppaasi esimerkiksi etusivulle bannerikarusellin, jossa näytetään ajoitetusti vaihtuvia bannereita.

Tässä artikkelissa neuvotaan bannerikarusellin luominen jQueryn Slick-pluginin avulla. Voit kuitenkin käyttää mitä tahansa muutakin tarkoitukseen sopivaa pluginia, sillä bannerilistan HTML-merkkausta on mahdollista muokata hyvin joustavasti.

Tämän artikkelin JavaScript-esimerkeissä käytetään jQuery-kirjaston funktioita. Varmista että jQuery on lisätty sivulle, jos käytät tämän artikkelin skriptejä omassa teemassasi.

Voit lisätä jQueryn teemaan käyttämällä {SupportScripts}-tagia.

Aluksi tulostetaan bannerit seuraavan Interface-merkkauksen avulla:

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

Lisää Slick-plugin sivulle sijoittamalla seuraava tagi ennen sulkevaa </body>-tagia:

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

Voit lisätä myös slickin omat CSS-tyylit sivun <head>-osioon, jolloin säästät vaivaa bannerien ulkoasun suunnittelussa:

<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"/>

Kun pluginin JavaScriptit on lisätty sivulle, alusta slick-plugin bannerikarusellin sisältävälle elementille seuraavan koodin avulla:

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

autoplay-asetuksella asetetaan karuselli käyntiin heti sivunlatauksen jälkeen. Lisätietoja Slickin asetuksista löydät pluginin omasta dokumentaatiosta. Voit esimerkiksi säätää bannerien vaihdon ajoitusta tai painikkeiden merkkausta.

Näin saat verkkokaupassa helposti käyttöön monipuolisesti muokattavan bannerikarusellin, jota voit käyttää millä tahansa sivulla. Jos sinulle jäi kysymyksiä aiheeseen liittyen, ota asia puheeksi MyCashflow'n asiakaspalvelun kanssa.