How to Create a Right Overflow Effect on Sliders in Bricks

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
• Set the section's overflow
• The slider settings
  • Non-looping sliders
  • Looping sliders
• The CSS:

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.