Barebones-teema sisältää valmiita banneripaikkoja sekä työkaluja erilaisten bannerien toteuttamiseen. Tältä sivulta löydät ohjeet bannerien käyttämiseen oletusteemassa.

Barebones sisältää valmiit tyylit koko näytön levyisille suurille bannereille sekä sivupalkissa allekkain näytettäville pienemmille bannereille.

Katso käyttöoppaasta tarkempi kuvaus oletusteeman bannereista.

Bannerikarusellin luominen Barebonesin työkaluilla

Tässä kappaleessa käydään läpi sliders.js-pluginin käyttäminen bannerikarusellin luomiseen.

Löydät sliders.js-pluginin oletusteeman tiedostosta /scripts/plugins/sliders.js. Lisäksi sliderin tyypin määrittävät muuttujat on asetettu tiedostossa /scripts/custom.js.

Sliderin SASS-tyylit löydät oletusteeman tiedostosta /styles/scss/modules/_sliders.scss.

sliders.js-plugin käyttää taustalla jQueryn Slick-pluginia.

Karusellin luominen tapahtuu samalla tavalla kuin tuotelistasliderin, eli bannerien containerille annetaan data-slider="foo"-attribuutti, jonka arvoksi annetaan halutun sliderin tyyppi.

Bannereita varten pluginissa on määritelty seuraavat tyypit:

  • banners-wide
  • banners-side

Alla näet esimerkin bannerikarusellin toteuttamisesta pluginin avulla:

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

Varmista myös että plugin on alustettu /scripts/custom.js-tiedostossa. Alla näet esimerkin pluginin alustamisesta yllä näkyvälle merkkaukselle:

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

Voit käyttää alustuksessa kaikkia Slick-pluginin asetuksia. Lue lisää asetuksista Slickin dokumentaatiossa.