Slider with preview of previous and next slides and arrow button relocation

Hi All,

I’m wondering if anyone can offer any tips for a slider I am building as part of a Brand Guideline website I’m developing for my company. We designed the slider in Sketch, and I’ve been able to get pretty close to building it in webflow, there’s just two small differences I’m struggling to figure out.

  • I’d like parts of the previous and next slides to be visible along with the current active slide. (currently only one slide can be seen, and I’d like about a fifth of the slides to the left and right to be visible as well).

  • The arrow buttons ideally would be below the image and caption along with the slide navigation. (Is it possible to pull these elements out of the mask? When ever I try to do so they get masked out. I’ve also tried achieving this with relative positioning, but was having the same issue).

I’ve provided a screenshot of the sketch design for refference, and you can see where I’ve been able to get so far with my read only link. Any help would be amazing. Please let me know if there’s anything I can clarify or if anythings confusing!

Thanks!

Here is my site Read-Only:
https://preview.webflow.com/preview/brand-guidelines-2020?utm_medium=preview_link&utm_source=designer&utm_content=brand-guidelines-2020&preview=889f79ff9801c160c2846f231e96ff19&pageId=5f5fbe06a28afa11507acffe&mode=preview

1 Like

Update for anyone who comes across this post with the same question.

You can change the location of the arrow buttons using absolute positioning on the left and right arrow components. One thing to note is you can’t position them past the max height set on either your main slider component or the mask within it. If you do so, they’ll appear to be hidden because they’re masked out.

The tutorial linked below by @PixelGeek is super helpful for figuring out how to display multiple slides at once. I was able to make it so there’s a preview of about 2/5 of the upcoming slide which is much closer to the intended design. Now all I’m trying to figure out is how to center the main slide and display 1/5 of the previous slide as well as 1/5 of the upcoming slide rather than 2/5 of the ladder.

I’ll continue to update this post as I figure things out for anyone who finds it useful. In the meantime any tips on centering the slider’s active slide and achieving the previous/next slide preview are more than welcome!

Pixel geeks “creating a multi-column slider…” tutorial

Current state of my slider design

1 Like

Hey Trevor. This was helpful. I’m finding that if I want it to repeat, once it gets to the last slide the 20% or so area that would normally be the next slide is blank before it goes back to slide one. Did you have the same problem, and if so, did you find a work around?

Thanks
Patrick