▼
Streaming live at 10am (PST)

How to position the arrow in regards to the content in a slider?

#1

Hi there again!

As I’m trying out the slider element, I wonder how I could move the arrow so that it is not on top of the text I put in?
As you can see below, the red arrow is on top of the content. One way I think to go around this is to change the padding, which is not ideal due to the loss of responsiveness.

屏幕截图(119)
屏幕截图(119).png1920x1080 290 KB
屏幕截图(120)
屏幕截图(120).png1920x1080 294 KB

I understand that slider is essentially a special div, so would putting a column in it in this case the best way? I need the image to be on the right and the content on the left! At least for now :smiley:

Here is the link to my project:https://preview.webflow.com/preview/jason-chens-marvelous-project?preview=b35e364ae2379ebef6bfb9854dec1159

THANK YOU SO MUCH

#2

This is actually the best way. What do you mean by “not ideal due to the loss of responsiveness”?

Alternatively, you can also set negative left value for the left arrow, and negative right value for the right arrow to move them outside of the slider (but this will get your arrows cropped out on smaller breakpoints so you’ll have to give a padding to the slider’s parent container instead)

Another way is to hide the slider arrows, and use custom code to link clicks on other element/button/image (that you can place anywhere on the page) to trigger prev/next on the slider.

#3

Here are a few ways I have changed up the controls on the Webflow slider component

Arrows on top right

https://webflow.com/website/ScottsSquare-Sample-2

Screenshot_2017-10-04_131035
Screenshot_2017-10-04_131035.jpg979x716 214 KB

Arrows and meta in separate location

https://webflow.com/website/Squarerooms

Screenshot_2017-10-04_131007
Screenshot_2017-10-04_131007.jpg1170x625 232 KB

Custom numbered slide icons

https://webflow.com/website/singapores-child-ilo8i6iy

Screenshot_2017-10-04_131031
Screenshot_2017-10-04_131031.png983x452 349 KB

Peek prev/next slides instead of arrows

https://webflow.com/website/singapores-child-ilo8i6iy

temp
temp.gif375x545 1.63 MB

#4

Hello! My understanding is that when you change the padding/margin to a set pixel value, the pixel value won’t change according to the screen size (because it is fixed). But I just played around with it, it seems that I may be mistaken?

But maybe you know what happened here? Is it the column that is doing it? hmmm

屏幕截图(122)
屏幕截图(122).png1920x1080 189 KB

#5

Ohhhhhh these are so good! Is there any tutorials online that I could learn how to do any of those? :joy:

#6

What would be some custom code I could need to modify the arrows? :smiley:

#7

It depends on your design (how you want them to be). Feel free to contact me at http://webflowexpert.com

#8

I see! For the couple designs that you shared above, did you just use the webflow slider setting to achieve all those? :smiley: If you don’t mind sharing?

#9

You can always open the read-only link to see how a showcased site is done

Screenshot_2017-10-05_121004

Most of the time you’ll need custom code to override styles that we don’t have access to in the designer, or scripts to workaround certain limitations.

closed #10

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