Barebones-teeman sliders.js-pluginilla voit toteuttaa verkkokauppaan esimerkiksi bannerikaruselleja ja tuotelistaslidereita. Tässä artikkelissa ohjeistetaan erilaisten sliderien toteuttaminen.

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.