Slider elements

Basics

Slider elements are created by using the default theme's sliders.js plugin.

To enable the plugin in a theme, initialize it and define the slider type for all desired elements.

Below you can see how the plugin is initialized by default in the Barebones theme. The code can be found in the file /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 } }
			]
		}
	});

Creating a banner carousel with Barebones tools

This section discusses creating a banner carousel by using the sliders.js plugin.

The carousel is created in the same way as product list sliders, meaning that the banner container is given the data-slider="foo" attribute with the desired slider type indicated as its value.

The plugin contains the following types that have been defined for banners:

• banners-wide
• banners-side

The example below shows how the banner carousel can be created by using the plugin:

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

Make sure that the plugin has been initialized in the file /scripts/custom.js. The example below shows how to initialize the plugin for the above markup:

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

You can use all of Slick plugin's settings in the initialization. To find out more about the settings, see Slick's documentation.