Barebones-teeman sliders.js-pluginilla voit toteuttaa verkkokauppaan esimerkiksi bannerikaruselleja ja tuotelistaslidereita. Tässä artikkelissa ohjeistetaan erilaisten sliderien toteuttaminen.
Barebones-teema poistuu.
Teeman kehittäminen on lopetettu, ja kaikki sen sisältämät työkalut tullaan poistamaan käytöstä.
Jatkossa MyCashflow'n oletusteemana toimii Fluid-teema, jonka ulkoasua ja toimintoja on helppo mukauttaa graafisen käyttöliittymän avulla käyttämällä teema-asetuksia.
Perusteet
Slider-elementtejä luodaan oletusteeman sliders.js-pluginin avulla.
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.
Plugin otetaan käyttöön teemassa alustamalla se ja määrittämällä kaikille halutuille elementeille slider-tyyppi.
Alla näet malliksi pluginin oletusarvoisen alustamisen Barebones-teemassa. Löydät tämän tiedostosta /scripts/custom.js.
MCF.Sliders.init({
'default': {
adaptiveHeight: false,
arrows: true,
dots: false,
easing: 'swing',
swipeToSlide: true,
prevArrow:
'<button class="Button slick-prev">' +
'<span class="fa fa-angle-left"></span>' +
'</button>',
nextArrow:
'<button class="Button slick-next">' +
'<span class="fa fa-angle-right"></span>' +
'</button>'
},
'banners-wide': {
autoplay: true,
autoplaySpeed: 5000,
slidesToShow: 1
},
'banners-side': {
autoplay: true,
autoplaySpeed: 5000,
slidesToShow: 1
},
'grid-list': {
slidesToShow: 5,
responsive: [
{ breakpoint: MCF.Theme.breakpoints['desktop'] + 1, settings: { slidesToShow: 4 } },
{ breakpoint: MCF.Theme.breakpoints['mobile-wide'] + 1, settings: { slidesToShow: 3 } },
{ breakpoint: MCF.Theme.breakpoints['mobile'] + 1, settings: { slidesToShow: 2 } }
]
},
'grid-list-narrow': {
slidesToShow: 4,
responsive: [
{ breakpoint: MCF.Theme.breakpoints['mobile-wide'] + 1, settings: { slidesToShow: 3 } },
{ breakpoint: MCF.Theme.breakpoints['mobile'] + 1, settings: { slidesToShow: 2 } }
]
},
'grid-list-wide': {
slidesToShow: 6,
responsive: [
{ breakpoint: MCF.Theme.breakpoints['desktop'] + 1, settings: { slidesToShow: 4 } },
{ breakpoint: MCF.Theme.breakpoints['mobile-wide'] + 1, settings: { slidesToShow: 3 } },
{ breakpoint: MCF.Theme.breakpoints['mobile'] + 1, settings: { slidesToShow: 2 } }
]
}
});
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.