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.
2 comments
stein
Thank you for this – it works great, except I can't get the left overflow hidden to work. Should this approach still work for the current Bricks version?
Sridhar Katakam
While you await Maxime's reply, you may want to check these:
https://brickssections.com/slider-with-partial-view/
https://brickssections.com/section-extending-to-right-edge/
https://brickssections.com/section-extending-from-left-edge/
https://brickssections.com/container-extending-to-right-edge/