I’ve got a quick question that I suspect has a simple solution, but I can’t find it. I’m working with a slider and want the arrows to have a static position. That is, I want them to stay in place even as the browser window resizes. This seems like it should be a really simple thing to do, but for some reason I can’t get it to work.
Basically, setting the arrows’ position to absolute results in them moving inwards as the page width shrinks, as their external margins are set relative to the edge of the page. If I set their positioning to static then I can’t move them into the place I want them.
I’ve got a read-only link for the project here. Because it’s got some custom stuff going on, you probably need to see the published link for the slider to work properly, which is here.
You have made their parent element — testimonial slider — Static, that’s why when they’re absolute, they rely on the next positioned parent, the slider wrapper, which takes up all the width of the viewport. By positioning the slider element itself again — testimonial slider — you should get what you want.
The slider arrows are difficult to control, they’re heavily pre-set.
That’s why when you do custom sliders, you may want to use a js that will use any of your custom element to act like the slider arrows. You then hide the original arrows, and craft arrows of your own that you place wherever you want. Finsweet has a solution for that, and Flowbase custom forms are using this too.
Sorry for the late reply! Thanks for your help, that’s just what I was looking for
Regarding things like Finsweet and Flowbase custom sliders, at the moment I’ve got some custom code on the slider (e.g. making the non-focused slides blurred and smaller). Can Finsweet or Flowbase do similar things?
Also, while I’m on the topic of slides, I’ve noticed that on the mobile view, when the screen width gets really narrow, the slide text overflows out of the slide. I’ve given the slides a minimum height so I thought they would expand in height as the screen narrowed, ensuring the text didn’t spill over. But that’s not been the case. Do you know how I can make that happen?
