Let’s look at the possibility of creating a slide show using slick plugin. An important feature will be the ability of the administrator to add, delete slides, and making settings of the slider. For this we will use “sections” and “sections blocks”.
For development of the theme we will use the template engine slate, that’s why the project structure may differ from yours.
Let’s go to the developer’s site and download the archive with the plugin, connect styles and js.
When I was connecting styles, I used SCSS files, which posted at src/styles/modules/ and connected in the file styles/theme.scss.
Js is located at src/scripts/vendor/ and connected in file src/scripts/vendor.js
Jquery was connected in the same way.
This is the main setting, the rest we will configure via the theme admin panel.
2. The structure
As I already wrote, the slider will be displayed by the section with the ability of dynamic adding slides and customizing of the feature set. That’s why I go to src/sections/ and create section file page-slider.liquid.
The slider has the most common structure.
div with slider_wrap class will be the parent element of Slick slider, and exactly there we will display the placeholders in the attribute data-slick, which will help us to transmit the configuration values of the slider.
Everything that we have wrapped in liquid tag for block in section.blocks is the content of our slides.
The configuration of our section is specified in JSON, which we will put into the schema tag.
At the top we will have an array of slider configurations, and below we will arrange an array of settings for the block of our slides. At the end we have such JSON.
At the result we have dynamic slider where we can add/delete the slides, change their order, add the content we need. Also, we can configure the settings like: autoplay, interval of changing slides, switching on/off arrows and dots.