Bricks Builder nestable slider with partial view

An offset slider is a slider where only a part of the slide is present. The other part of the slide is displayed to show the visitor there’s more to scroll.

Thankfully, Bricks uses SplideJS which makes it easy to achieve this layout.

Add the Bricks Nestable Slider element to your page. Add some images to the slide.

Go to Options, change the Options type from Default to Custom, and paste this JSON code.

{
  "type":"loop",
  "direction":"ltr",
  "keyboard":"global",
  "height":"50vh",
  "gap":"30px",
  "padding": {"left":"0","right":"25%"},
  "start":0,
  "perPage":"1",
  "perMove":1,
  "speed":500,
  "interval":3000,
  "autoHeight":false,
  "autoplay":false,
  "pauseOnHover":false,
  "pauseOnFocus":false,
  "arrows":false,
  "pagination":true,
  "focus":"center",
  "breakpoints":{"767":{"perPage":"1"}}
}Code language: JSON / JSON with Comments (json)

That’s it! You have an offset slider now. If you want to have more (or less) offset, simply change the padding left and right values in the JSON code.

Let’s add some text and styling to it.

Voila.

Reference

• https://splidejs.com/guides/options/#padding