In this tutorial, we’ll learn how to recreate a nice overflow effect on the right of our sliders in Bricks.
Table of Contents
Introduction
Recently, I’ve been asked to create a tutorial on how to add the pretty popular overflow effect on sliders, but only on the right – and keep the left of the slider boxed.
There are different ways to achieve it. I’ll list two methods here: one using the looping slider and one without the loop.
Let’s see how we can implement it using only a few lines of CSS.
Set the section’s overflow
First of all, make sure that the section that contains the slider element has overflow set to hidden:
The slider settings
Let’s add the class .slider-right-overflow to our slider:
Non-looping sliders
Set the slider type to slide:
The slider is looking as expected on frontend:
But when we slide it, the overflow on the left won’t be applied:
If you are fine with that, jump on the CSS section. Otherwise check the second method.
Looping sliders
Set the slider type to Loop:
Then add a :before pseudo-element to the same element (the slider container, not the slides), and add the following layout settings:
And finally, add the same background color of your section to the pseudo-element (in our case it’s #fff since the section background is white):
Now the left overflow is preserved even when sliding:
The CSS:
Add the following CSS code to your page:
.slider-right-overflow .splide__track {
overflow: visible;
}And we are done! Super easy to do for a great result.
