Settings Tab
Last updated
Last updated
The Settings tab allows you to set up a slider inside your query template, repeater or taxonomy query.
When the Slider is toggled on, a Slider tab will open and give you access to a selection of tabs to help you set up your Slider, such as general, layout, play, interaction, arrows, pagination, accessibility.
For a detailed description of Slider options, please visit https://splidejs.com/guides/options/
The General tab allows you to adjust settings such as type (slide, loop, fade), direction (left to right, right to left, vertical), lazyload (false, true,nearby, sequential), start index, focus, update focus move.
For a detailed description of Slider options, please visit https://splidejs.com/guides/options/
The layout tab allows you to set parameters for your layout, such as number of slides per page, number of slides per move, padding, gap, height, width, fixed height, fixed width, height ration, toggle auto height, toggle auto width.
For a detailed description of Slider options, please visit https://splidejs.com/guides/options/
The play tab allows you to set options for how you want the slider to play, such as transition, easing, autoplay (false, true, pause), rewind (false, true).
For a detailed description of Slider options, please visit https://splidejs.com/guides/options/
The interaction tab gives you access to the way the user interacts with the slider, such as drag (false, true, free) min. drag threshold, snap (false, true), keyboard (false, true, global, focused), wheel (false, true), min. wheel threshold, wheel sleep, release wheel (false, true).
For a detailed description of Slider options, please visit https://splidejs.com/guides/options/
The Arrows tab allows you to style the navigation arrows but also to set specific settings for arrow behaviour, such as arrows, styling, snap.
The arrows property allows you to toggle navigation icons off by selecting.false in the Arrows dropdown.
To enable arrows, choose true in the Arrows dropdown (default).
This will open up additional options for styling your arrow icons.
To reset, click the blue dot.
The styling property allows you to add styles to your navigation icons (arrows) using slider specific classes, "Arrows +" and "Arrows Hover +".
If you click on one of the Styling + buttons, a slider specific class will be created.
If you now click on the new slider specific class, you will be able to style the Navigation Icons (Arrows) or Navigation Hover.
The previous arrow property allows you to show/hide the previous (left) navigation icon and to select an alternative icon.
The right arrow property allows you to show/hide the right navigation icon and to select an alternative icon if desired.
The snap property snaps to the closest slide when you drag.
The pagination property allows you to modify parameters in the pages of your dynamic slider such as whether pages are visible or not, page wrapper, page number and active page.
The Pagination dropdown allows you to choose whether to have pagination visible or not on your dynamic slider (false, true).
To have pagination, select "true" in the dropdown.
The styling property allows you to add slider specific classes to your pagination, such as "Page Wrapper", "Page Item", "Page Item Active".
Select the slider specific class you require to add it to the class of the parent block.
When you click on the slide specific class you want to modify, an editing panel will open up where you can adjust styling options as below.
Before setting up keyboard access to pagination, remember to enable Keyboard in the Interaction panel
When enabled in the pagination tab, (true in dropdown) keyboard will allow you to control slider pagination from the keyboard on the front end.
The direction property allows you to select the direction in which you wish to control your dynamic slider from the keyboard on the frontend (left to right, right to left, vertical).
The accessibility property allows you to add an accessibility label (the thing it labels) or labelled by (references other elements) to your dynamic slider.
Next to the Slider toggle you will find Copy and Paste Icons.
The copy icon allows you to copy the slider options you have set up so that you can transfer them to another dynamic slider elsewhere.
The paste icon allows you to paste slider options copied from another dynamic slider.
The Copy Slider ID icon allows you to copy the ID of your slider so that you can paste it somewhere else on the page.
