You can implement things such as banner carousels and product list sliders in your online store by using the Barebones theme's slider.js plugin. This article demonstrates how to implement different kinds of sliders.
The Barebones theme has been deprecated.
Theme development has been discontinued, and all the tools included in it are to be disabled.
From now on, the Fluid theme serves as MyCashflow's default theme. Its appearance and functionalities are easy to customize by adjusting theme settings with the graphical user interface.
Basics
Slider elements are created by using the default theme's sliders.js plugin.
The sliders.js plugin can be found in the default theme's file /scripts/plugins/sliders.js. Additionally, the variables that determine the type of slider are set in the file /scripts/custom.js.
The slider's SASS styles can be found in the default theme's file /styles/scss/modules/_sliders.scss.
The sliders.js plugin also uses the jQuery Slick plugin in the background.
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 sliders.js plugin can be found in the default theme's file /scripts/plugins/sliders.js. Additionally, the variables that determine the type of slider are set in the file /scripts/custom.js.
The slider's SASS styles can be found in the default theme's file /styles/scss/modules/_sliders.scss.
The sliders.js plugin also uses the jQuery Slick plugin in the background.
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.