We recently built-in support for many of the BricksExtras elements for being filtered by WPGridBuilder. This means adding Pro Sliders (and other elements) inside of the query loops that are being filtered dynamically with facets will just work out of the box.
But what if we wanted some facets to dynamically change the slides inside of an active slider depending on the results of the facets? This is how we can do it..
(Note this is only for when Bricks’ query loop is being used to populate the slides, not for static sliders or galleries)
End Result
The facets can be used to filter the slides themselves.
Notice that we’re also taking advantage of the ‘conditional slider’ setting from the Pro Slider. Meaning when there aren’t enough slides to fill the available space, the slider features disappear and we’re just left with a regular horizontal flex layout. The dots, the pagination, and the slider counter are no longer visible and also nothing is draggable.
Setting up the Facets
Using WPGridBuilder’s Bricks addon makes this really simple. The process when using with a slider is no different to when using with any other query loop. Simply add in WPGridBuilder’s facet element, choose the facet type and then select the element to filter.
In this case, the element to filter is the block being used as the slide inside of the Pro Slider where the query loop has been set up.
The part that we need to adjust, which is why this tutorial exists, is that the slider needs to be then refreshed each time slides have been removed or added. The number of slides has changed, so the slider and the controllers need to reflect that.
Code Snippet
Most of the logic is already built into the slider already, including the Pro Slider controllers. When the slider is refreshed, they’ll know what to do. So all we’re actually needing to do is the final step, which is just to refresh when the facets are used.
This code will need to be added either inside of a child theme or code snippet plugin.
The part that needs changing is to replace ‘egnswy’ with your own slider’s unique identifier (refer to the developer docs for the Pro Slider on how to get that)
add_action('wp_footer', 'bl_refresh_slider_after_facets', 99);
function bl_refresh_slider_after_facets() { ?>
<script>
const sliderIdentifier = 'egnswy'; /* change to your slider identifier */
window.WP_Grid_Builder && WP_Grid_Builder.on('init', function(wpgb) {
wpgb.facets.on('appended', function(content) {
content.forEach((container) => {
const mySlider = xSlider.Instances[sliderIdentifier]
if (null != mySlider) {
mySlider.refresh()
}
})
})
})
</script>
<?php
};That’s it.
Now WPGB will take care of adding and removing the slides dynamically, and the slider and the controller will refresh at the same time as the facets to make sure everything is behaving correctly for the new number of slides.
