I thought this would be really easy to do, but the slider (nestable) is more complicated than I thought. I tried the carousel too with no success.
I want to make a slider like in this image, with overflow to the right, sliding one image at a time.
I found this tutorial How to Create a Right Overflow Effect on Sliders in Bricks - BricksLabs which looks like what I want to achieve, but doesn’t go into detail how to build the slides. It also looks like there are multiple images on a slide.
Any tips will be massively appreciated.
Using the “slider (nestable) > Options > Options type > Custom”.
This code seems to work:
{
"type": "loop",
"direction":"ltr",
"keyboard":"global",
"border": "none",
"width": "800px",
"height":"400px",
"gap":"20px",
"start":0,
"perPage":"2.5",
"perMove":1,
"speed":400,
"interval":3000,
"autoplay":false,
"pauseOnHover":false,
"pauseOnFocus":false,
"pagination":false,
"focus": "",
"isNavigation": true,
"updateOnMove": true
}
Explained:
“direction”:“ltr”, //Left to right//
“perPage”:“2.5”, //Change the amount to change pages displayed//
“perMove”:1, //Change the amount to change the amount of pages moved each click//
“pagination”:true, //Change to true/false to remove/add pagination dots//
“focus”: “right”,//Change to center or leave blank to change the starting focus, even while looping//
Results:
Good luck!
1 Like
Thanks. Managed to get it working.
“perPage”:“2.5” is not the way to go since splide.js wasn’t designed to accept fractional input for that property. The correct way is to use the slide padding property (not in Bricks but in the custom options). I go over it in this video: https://www.youtube.com/watch?v=qjMhb3y-2Z4
1 Like