Pro Slider

Build more advanced, accessible sliders more easily in Bricks. The Pro slider is powered by SplideJS (the same as Bricks native sliders) and extends the functionality in a number of ways..

Highlighted Features

• “Edit mode” in the builder for a smoother building experience (no re-rendering)
• Add progress bars, slide counter, Autoplay pause/play button, custom navigation buttons, autoplay progress bars as separate control elements.
• Slider syncing for creating thumbnail sliders
• Support for adding animations inside the slides.
• Intersection settings, to start the slider only when comes into view.
• Control over the slider user interaction (threshold / flicking power and slide transition easing)
• URL Hash Navigation (eg link to /my-page/#slide-5)
• Add dynamic galleries for slides (ACF, Metabox, Media Library etc)
• Allow code elements inside the slider, to allow for outputting anything as a slider.
• Built-in ‘clip-direction’ for overflowing sliders is only one direction.
• Developer docs for controlling dynamically with JS.

Video Tutorials

There’s a series of videos for the Pro Slider (starting off with beginner, and moving towards more advanced)

Start with Part 1..

What can be used inside of a Pro Slider?..

• Anything that you can put inside a container, or from using Bricks’ query loop, can be made into a slider (the slides are just blocks, dynamic tags can be used inside to pull in dynamic data)
• Images pulled directly from either your media library, or a gallery custom field such as ACF gallery field, or Metabox’ Advanced Image field (using the Pro Slider Gallery element)
• A code element, to cover use cases where you need to add slides using code (ie for uses outside of the current available options)
• .. Is it possible to add X or Y? If it’s not listed above, send a feature request.

Pro Slider Elements

The Pro slider has a few elements, which allows for a lot of flexibilty in terms of creating layouts and building sliders.

• Pro Slider (the main slider track element itself). This is where all the configuration and layout controls for the slider are found.
• Slides – the individual slides that can contain any elements.
• Pro Slider Controls – External controls/extras such as progress bars, slide counter, autoplay buttons that can be used to control the slider.
• Pro Slider Gallery – Instead of nesting individual slides, you can instead populate the contents of the Pro Slider with a gallery. This element allows you to configure the gallery, choose the image source, image sizes, captions etc that you wish to appear inside the slider. (you can then configure the slider using the main Pro Slider settings)

Option Controls

Many of the behaviour / interaction options are coming directly from Splide, if you don’t quite understand what a specific option is supposed to do, check the Splide docs for a list of the options and descriptions.

Some notes regarding some options..

• Setting options for the slider isn’t a style that can be done with a class, it’s changing the behaviour of the slider, so make sure the element ID is selected.
• Setting a width on the slides will override the number of slides to show. ie you either set the number of slides (like 3) OR you set a fixed width (like 300px, or 3em), the fixed width will be prioritised.
• To hide/show the pagination dots or arrows at different breakpoints. make sure they’re enabled, and then use the ‘hide at this breakpoint’ setting. If they’re disabled or set to ‘none’ they won’t be output at all.
• If you’re adding in images, for the purpose of making them control the height or width of the slides, you likely need to use the ‘force image size’ settings to make sure they are taking up the full space of the slide.

Syncing Sliders

Enabling syncing on the thumbnail slider (the one you want the user to be able to click to control the other one). After enabling, provide the selector for the slider you wish to control, ie the element ID.

The slider syncing can also be used inside query loops. Use the element ID for the selector of the other slide. (not a class, as the classes will apply to every slider in the loop).

Sync multiple sliders – You can choose for the slider to act as the navigation for more than one other slider. To do so, include all of the selectors inside of the ‘sync selector’ setting seperated by commas.

Example: “.slider-to-control, .another-slider-to-control”

Independent scrolling – Enable if you want to be able to browse/scroll through the navigation slider without actually moving the main slider. Only when the user clicks the slide will then it change the active slide on the slider being controlled.

Looping / Infinite Slides

Go to Pro Slider > Behaviour > Type = Loop.

Note that if using loop, Splide will create clones of the slides to give the illusion of ‘infinite slides’. To prevent multIple ID issues, Splide will change the IDs of these new slides. For this reason, if using loop mode, avoid adding styles to the slides using their IDs, either use a class or if just changing color/layout, use the settings directly in the Pro Slider.

If wishing to have a fade slider that continously loops, select ‘fade’ from the type dropdown and then enable ‘rewind’. This will ensure the slider starts back at the beginning after the last slide.

AutoPlay / AutoScroll

Autoplay – Move to the next slide after a set number of ms.

Autoscroll – Continiously move the slider at the set speed. (negative speed will make it go in the opposite direction)

Start as paused – (for autoplay) If adding play/pause button to control the slider, you can choose to start the slider as paused so the autoplay will only happen if the user clicks the button.

Pause on hover – Hovering over the slider will pause the movement, to allow the user to interact with the slide (for eg to allow them to click a button).

Pause on focus – The same as above, but for the user focus. So if the user tabs to the element, or clicks something inside of the slide to focus it.

Intersection

Start slider when comes into view – Enable will prevent both autoplay or autoscroll from starting until the user actually scrolls down to the slider.

Root margin – Change how far away from the viewport the slider needs to be to start playing. for eg, 200px would mean that the slider will need to be within 200px of the viewport to start. (default is 0px).

URL Hash Navigation

The URL hash navigation allows you to link to a specific slide from another page. By default, the URL hash for each slide is going to be the slider element’s ID followed by the index of the slide.

So, for example, if you have a slider with the ID of #product. Then you could link to the third product in the slider with /my-page/#product-3. When the user lands on the page, the slider will start at that particular slide as active.

If you’re using individual slides and want to create your own URL hash for a specific slide, you can manually add the attribute data-splide-hash with the value you want. For eg, adding the attribute to one individual slide as data-splide-hash="my-important-slide" will allow you to then link to that slide from another page with /my-page/#my-important-slide.

Conditional Sliders

The slider functionality can be automatically disabled at breakpoints where there isn’t enough slides to cover the slider width. Very useful for use with query loops, where you may be using the slider in a template and occasionally there won’t be enough slides so the arrows, the pagination dots, the controllers etc don’t make sense to be there.

Horizontal layout if not active – When the slider is disabled, the slides will just be a regular horizontal flex layout. You can change the alignment when it’s disabled for what is best for your design.

Code Element

To add some more flexibility, if you’re trying to add images from a source that isn’t yet supported by Bricks dynamic data and need to use a code element to output the slides manually, we’ve added support for using a code element inside of the Pro Slider to populate the slides.

Splide is very strict on the structure needed, so the requirement is..

• The code element must have the class splide__list
• The output of the code element must be the list of slides (containing whatever you want) as divs with the two classes x-slider_slide and splide__slide.
• The Pro Slider element must be in gallery mode.

For eg, the output code from the code element would be something like..

<div class="x-slider_slide splide__slide">
   <img src="//bricksextras.b-cdn.net/image-1.jpg">
</div>
<div class="x-slider_slide splide__slide">
   <img src="//bricksextras.b-cdn.net/image-2.jpg">
</div>
<div class="x-slider_slide splide__slide">
   <img src="//bricksextras.b-cdn.net/image-3.jpg">
</div>

---

Inner Animations

Bricks comes with the ability to add entry animations to any elements, so they appear when they become visible on the page. We added support for adding these into the Pro Slider so that instead of being triggered when they scroll into view, they can either be triggered when the slide becomes active or visible. Currently “fadeins” are the animations that are supported.. fadeIn, fadeInUp, fadeInLeft etc.

Update – as of Bricks 1.6 (Beta), the entry animations have been removed from Bricks. We’ve added support for the new ‘interactions’ to achieve the same. Choose ‘enter viewport’ as the trigger and ‘start animation’ and then select any fadein animation. The Pro Slider will make sure the animations only trigger on active or visible slides.

Animation trigger – Choose whether the animations are triggers when the slide they are in is active, or is made visible.

Only animate once – Will ensure the animations are only seen one time, then the elements will remain visible.

First element delay (ms) – You may want to delay the very first animation, so that it waits for the slider transition to complete before starting.

Auto-stagger animation delays – You can already set delays on the animations, but to save time if you want them all to animate after set intervals you can enable auto-stagger and set a delay time.

For eg, setting up auto-stagger and a delay of 100ms, means the first element with an animation will play after 100ms, followed by the next 100ms later, and then the next one another 100ms after. To remove any elements from this auto-stagger (you may want to add your own delay for that element), give it the class ‘no-stagger’ to be ignored.

---

Lazy Loading

As of v1.2.4, the slider supports Bricks’ native loading. ie any images that are off-screen when the page loads, won’t be loading until the user starts using the slider. We’ve now also added the option to enable ‘Splide Lazy Loading’ instead. This means you can take advantage of Splide’s lazy loading feature where you choose how many slides off the screen you want the images to start loading.

If using the Pro Slider Gallery, the Splide Lazy Loading is enabled by default. If adding in images yourself, refer to the Splide docs on how to add lazy loading to your images.

(Splide lazy loading gives more control, but the simplest method is to stick Bricks’ native lazy loading, where this is built into all image elements out to box if it’s enabled.)

---

Fade gradient

[BricksExtras v1.3.7+]

When in ‘loop’ made, a new option is available to easily add a fading gradient to the sides of the slider, with control over the distance from the edges and the gradient slope.

Tutorials

• WooCommerce Product Gallery Thumbnail Slider in Bricks

Copyable JSON

• Slider with Different Slide Widths using Auto slide width