Trying to make the arrows and their containers thinner in the slider

I am trying to make a slider with 3, 2 and 1 slide(s) based on different breakpoints, but when it’s one slide on mobile, the arrows are too far away from the sides of the screen. I am tryign to change the width of the div that contains the arrows, but i cannot figure out how to do it, and it’s driving me NUTS…please, somebody help…


This is kind of a hack, but you can position the arrow icons absolute and just position them wherever you want. They should still be linked to the slider links even if they fall outside the parent div.

Hope that helps!

That’s actually not the issue. The issue is that I’m trying to make the container div of the arrows thinner, as i have given it a fill to cover the slides underneath…that may not be the best approach, but it’s the only way i could find to make it work the way i want it to. Each slide does NOT cover the width of the viewport, so i need something to cover the edges…i am using the the arrow container div, but i cannot find any way to make those divs thinner in any way at all…

le sigh

Are you talking about this link block here?

yes, sir. I actually sort of solved the problem through hacking…I added a class to each arrow to move them over with margin, then i added a background gradient to the containing divs for the arrows and set one end to 100% opacity, the other to 0%, then moved them next to each other, so that is appears that only half the div has a fill. Total, hack, but at least it worked, in terms of making it look how i want it to look.

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.