Slider
A slider is a dynamic page block that shows several content elements in turn. The widget contains child elements with the same structure.
The Slider widget can be used if you need to add interactivity to your website. For example, a slider can be used to post a portfolio or reviews. The user may scroll through the slides manually using controls, or this can be done automatically.
By default, slides inside a widget do not contain elements. You may add elements and widgets to your slide to customize it.
You may control the number of slides by adding them in the Slider widget Settings.
The Slider consists of Slider Wrapper and Thumbs Wrapper. Slider Wrapper includes Slider layers — each slide and controls, including toggle buttons and pagination.
Thumbs Wrapper layers are a slider thumbnail with a similar structure.
By default, the thumbnail is disabled. You may add it by clicking «+» in the Extra Widget menu of the Slider settings.
The Slider can be controlled using the settings on the Settings tab in the right panel.
By default, 3 slides are added. You may add the number of slides you need. Slides can also be deleted or rearranged.
The height of the slider is determined by the height of the content embedded in the slides. If the content sizes are different, the slider adapts to the slide with a maximum height.
You may turn on the Adaptive Height setting, so the height of each slide will adapt to its content.
Similar to the List and Block List widgets, the Slider has the same structure for each slide. You may make the slide structure independent by enabling the appropriate setting.
Once the setting is enabled, it cannot be canceled. Slide elements with an independent structure can be added, removed, moved, and hidden.
You may control scrolling settings. To do this, set:
- Scrolling effect, the visual effect of changing slides and its speed;
The scrolling effect is described with Bezier curves, showing the speed of animation when changing slides. You may select the desired type from the drop-down list. The default type is Linear.
- Scroll direction: horizontal or vertical;
The vertical scroll effect will only work with the «Slide» one.
You may disable pagination by touch, as well as set the settings for automatic slide changing.
To do this, enable the appropriate setting.
By default, the settings are disabled. You may enable all settings at once or select only those you need.
You may hide the toggle arrows on the first and last slide and customize the pagination display.
By default, points are used to display pagination. You may select the desired format in the drop-down list.
The following options are available:
- Points;
- Numbers;
- Numbers from 01;
- Page by page;
- Disable pagination (none)
To control pagination styles, create a selector for the Current state.
The Slider thumbnail is used to switch to a specific slide. By default, only images are included in the slider thumbnail.
When you click the image in a thumbnail, the slide with the corresponding image will become active.
Slider thumbnails automatically include images contained in the slide.
You may add a slider thumbnail by clicking + in the Advanced menu on the Settings tab.
If necessary, you may add elements and widgets in the thumbnail that do not contain a link.
Use the thumbnail settings to set the thumbnail appearance. You may choose how many slides will be displayed per row and enable thumbs slider.
If you want to scroll through the thumbnail with the slider, enable the appropriate setting. This way you may switch thumbnail slides regardless of the main slider.
