Build dynamic sliders & carousels with support for building custom navigation, vertical & horizontal sliders, mouse wheel & keyboard controls, fade effects, controls, syncing sliders & parallax elements inside the slides.
Details of each individual setting and it’s use are listed below. For a general overview, here’s a 11 minute video showing building a synced slider from scratch, which covers many of the settings & features..
Note that slides need to be added for the dots or arrows to be visible. If there’s only one slide, which is the default before you add anything in, the component will just appear empty.
Slides – Add slides manually from the slide accordion menu or dynamically by setting up the Pro slider as a repeater provider and then the first slide as a repeater consumer. (this way each slide can be a seperate post with dynamic data coming from the post)
Here’s where the main controls for changing the overall layout of the slider for each device width.
Slider Type – Choose from fade or slide type for your slider. Fade will automatically set the number of slides to show to 1.
Slides to show – How many slides are visible. Changing this will dynamically change the width of the slides to fit (or height if setting up a vertical slider). Can be changed across device widths.
Slides to scroll – Set the number of slides that will scroll (grouped together) when the navigation arrows are clicked. Can be changed across device widths.
Space between slides – Set the ‘gap’ between each individual slides in px.
Initial slide index – Which slide do you want the slider to start as selected when the page first loads. It’s the slide index, so 0 is the first slide, 1 is the second.
Centered slides – If enabled, active slide will be centered, not always on the left side.
Direction – Can be 'horizontal' or 'vertical' (for vertical slider) Note that with a vertical slider, the height of the slider will need to be set.
Auto height – If the height of slides in a horizontal slider are different, enabling autoheight will make the whole slider adapt height dynamically as the slider is scrolled. If disabled, the slider will be the height of the highest slide.
Here is where you set the overall behaviour and settings for interacting with the slider.
Transition duration – How long (in ms) it takes to transition to each slide.
Infinite slides (loop) – Enable continuous loop mode where the slides are repeated when the user arrives at the last slide.
Autoplay – The slider will start playing, rotating between slides without any interactions needed
Autoplay speed (delay) – How long to wait (in ms) before going to the next slide
Autoplay disable after interaction – If you want the autoplay to be cancelled once the user has clicked or interacted with the slider in any way.
CSS mode – Mainly for performance purposes. You have the option if to set the slider to use CSS to handle the sliding. Ideal for simple sliders, but will disable other features if used (such as free mode and changing the speed)
Free mode – Allows the user free movement across the slider.
Snap to slides positions in free mode – If in free mode, this will make sure the sliders still snap into place once the user stops interacting with the slider.
Hash Navigation – Enables hash url navigation to for slides, where the #ID will be added in the browser address bar. Allows for creating hash links that would lead to a particular slide as long as the ID is known.
Mousewheel control – Enables navigation through slides using mouse wheel / trackpads by gestering.
Clicking a slide will select it – If enabled, when the user clicks an individual slide, the slider would navigate to that slide and select it.
Add support for parallax elements – This feature allows you to add custom parallax effects to any elements inside of the slides. The ‘sliding speed’ of elements needs to be added to the element’s themselves. This can be in Zion Builder using the attributes menu in the UI. Add the attribute name ‘data-swiper-parallax’, with the value as a number or a percentage, this will control the movement in relation to it’s position within the slider. A number will be the number of px, a percentage would be the percentage of the element’s width.
Note – will include a tutorial for the parallax effects as it’s easier to see it.
Threshold – Set the threshold value (in px). If “touch distance” will be lower than this value then the slider will not move. Leave at zero if unsure.
You can choose to keep the default navigation arrows (and simply style them to get the design you want) or use any elements on the page as navigation. This is useful if you have specific icons or buttons you want to use.
Custom navigation selectors – If using custom elements, the selector for those elements are needed,. Ideally the ID of the element, eg #previous-button, #next-button.
The dots (or bullets) can be styled however you like, or removed completely. For full styling options go to the styling tab where you’ll find both ‘pagination wrapper’ for repositioning all the dots, and ‘pagination dots’ where you can style the dots themselves.
Keyboard navigation – Enable to allow the user to navigate the carousel using only the keyboard. The navigation will only be possible when the slider is visible in the viewport.
Prev/Next Aria labels – Will add aria-labels to the default navigation arrows that are built into the slider. This can be useful for adding more context, so instead of ‘next slide’ it could be ‘slide to next product’, for eg.
There are two methods available for syncing two sliders. Called ‘Thumbs’ and ‘Controller’. They work very differently and each have pros and cons.
Thumbs – Useful if needing to create a small thumbnail slider to go alongside a larger slider, in order to control it by clicking the relevant slide to select (and navigate) to the same slide the large slider. The number of slides in view doesn’t need to be the same for each slider, the user is free to scroll across the slider and only when they click a slide will it control the other slider.
Note – when setting this up, you’d need to set this on the slider that is the slider needing to be controlled, not the slider acting as the thumbs.
Controller – Useful if you need the slider movements to be synced exactly 1:1, so moving one slider will move the other slide in exactly the same way. The number of ‘slides to scroll’ would need to be the same in each slider. This can be useful for building more complicated sliders, where there are multiple parts that all need to move at the same time.
For more advanced users looking to get more into the code and change the behaviour of the slider outside of the settings, you can access many of Swipers parameters via code by adding a code block element after the slider element.
Here is an example of how to change the slides per view programmatically.. (note that our support wouldn’t extend to helping with custom solutions built with custom code), but if you know what you’re doing with the SwiperJS library, this is how to do it..
<script>
document.addEventListener("DOMContentLoaded", function() {
const proSliderSelector = '#your_slider_id'; /* change to your slider ID */
const swiperInst = document.querySelector(proSliderSelector).swiper;
// add custom parameters here
swiperInst.params.slidesPerView = 4;
});
</script>