Re-position slider arrows OUTSIDE of slider

Design help Animations & Interactions
1

I’m trying to recreate the home page of this site and am stuck on the slider section that sits below Recent Work.

Screen Shot 2023-12-20 at 3.31.11 PM
Screen Shot 2023-12-20 at 3.31.11 PM1613×1080 127 KB

How do I position the slider arrows so that they sit OUTSIDE of the slider?

Other forums like this one suggest giving the slides a margin and adding negative values to the arrows to reposition them. But this seems a bit flimsy. I’d rather that the arrows are nestled inside of the div that I’d like them to appear to be sitting within. I.e. anchored to the bottom right side of the left column.

I understand that there’s a way to do this using custom code as explained here.

BUT, this only seems to work if the new slider arrows that I’ve created are still nestled inside of the slider, which defeats the point.

I don’t understand code, but have been trying to re-jig the following script to work for what I’m trying to achieve as it feels close.

<script> var Webflow = Webflow || []; Webflow.push(function() { var l = $('#myCustomSlider .w-slider-arrow-left'); var r = $('#myCustomSlider .w-slider-arrow-right'); $('#myCustomSlider') .on('click', '.slider-left', function() { l.trigger('tap'); }) .on('click', '.slider-right', function() { r.trigger('tap'); }); }); </script>

I’ve seen a few threads on this but none that quite get to the bottom of it.

Would be so grateful for any help!

Here is my public share link: [LINK]1
(how to access public share link)

2

@ samliew Sorry to tag you direct but you’ve been really helpful in the past and this is the code originally shared by you for the same problem.

3

Here’s the read only link

4

Finsweet has a solution where you can mirror click events. This should solve your problem:

5

Awesome. I’ll give it a go.

I actually ended up adding negative values to the arrows to reposition them and it worked fine.

Haven’t looked at making the design responsive yet though so will see what happens then and problem solve as needed.