Sliders

The sliders and their configurations are defined in the Sliders backend module. There are four basic types of a slider record:

Configuration

Record of this type contains only the configuration of a slider. Once you have created a configuration record, you can later use it in association with e.g. slider content elements, which allow to have an individual content, but the same slider settings.

Content slides

This type allows you to create a slider with content elements as its children. Once created, you can edit its content by clicking the yellow pencil button. This kind of records are great for sliders which repeat on several pages across your website.

Hero slider

The hero slider is designed to be a huge slider with one slide per view, that contains multiple content elements inside it, optionally spiced up with fancy animations. It is usually placed in the intro section of the homepage to attract the users to your website. You can use element sets to effortlessly create this type of slider.

Images

Similar to content slider, except that it allows you to define multiple images as slide items. This is a recommended way to create image galleries as sliders.

The sliders can be added to the page either as content elements or frontend modules:

Slider configuration

You can configure the most important features of a slider in its settings:

1. General settings → basic settings such as number of items displayed on the screen, slide direction or animation speed.
2. Navigation settings → settings for the slider next/previous navigation buttons.
3. Pagination settings → settings for the slider pagination (dots).
4. Scrollbar settings → settings for the slider scrollbar.
5. Autoplay settings → settings for the slider autoplay.
6. Keyboard control settings → settings for controlling the slider using keyboard.
7. Mousewheel control settings → settings for controlling the slider using mousewheel.
8. Hash settings → settings for the slider URL hash management.

Of course every slider can also be styled using custom style presets.

Slider responsiveness

In frontend, sliders are powered by the well known and battle tested Swiper. This great script allows to set different slider configurations per multiple breakpoints, which makes every slider responsive and friendly for any device size.

In order to adjust the configuration per breakpoint, you have to click the last button with a screen icon next to each slider record. You will be then taken to the breakpoints view where you can manage every breakpoint configuration separately.

Advanced usage in template files

Although slider backend settings come with a lot of features, sometimes you may need to adjust a configuration or markup directly in the rendering templates. Basically, all slider are managed using two templates:

1. vee_slider_default.html5 → contains an HTML markup for slider. This template can be selected in the slider settings.
2. vee_slide_default.html5 → contains an HTML markup for a content slide. This template can be selected in the slide settings.
3. vee_helper_slider.html5 → a partial template used by the main slider template. It contains the logic necessary to build a slider configuration. This is an ideal place to introduce your custom configuration rules.