Link Slider elements outside of Slider

Design help General
1

Hey Guys,
I am trying to position the slider arrows and Nav outside of the slider by linking another element to the arrows. I followed the steps from this post
How can I move slider arrows to a different position inside the slider?
But I just can’t get it to work. Would be awesome if someone could help me out with this.
Thank you in advance.

Here is my site Read-Only: LINK

2

Hi @Manik

Welcome to Webflow!

So vis-a-vis your question… lets break it down…

  1. Since your are adding custom code, it will not be visible in a preview - so you have to publish your page and then go to the live page you published to see if it worked.

  2. I can’t see whether it is working or not since I only see the preview and can’t publish at all

  3. if you want that text block to act as an arrow element, then you should either name it in the selector 00%20PM or ID for in page linking 46%20PM “w-slider-arrow-left” and “w-slider-arrow-right” - as thats’ what the code is looking for.

  4. Finally, I am not sure what exactly you are trying to achieve - perhaps there is an easier way to get there if you will explain and give an example of what you want to get…

Hope it helps!

3

Hi IVG, thank you for the reply

I published it and it didn’t work.

Can I do anything so you could publish it? here is the Link for the published page.

  1. if you want that text block to act as an arrow element, then you should either name it in the selector or ID for in page linking “w-slider-arrow-left” and “w-slider-arrow-right” - as thats’ what the code is looking for.

“w-slider-arrow-left” is the class of the “real premade” slider arrow link block and I have to give my custom slider arrow link block a class of “slider-right” so it links to the “real” slider arrows. At least that is what was posted in the other thread:

992×612 1.14 MB

…this also makes sense with the html code on my page.

Also I think in this case ID wouldn’t work because the custom code expects a class. Anyway I tried it with your class name suggestions to and it didn’t work either.

I would really like to get this to work just because I want to know what my mistake is. But what I want in the end is the right arrow in another grid element on the far right of the viewport and the slider image on the left like in the design. I don’t want to use absolute positioning because than it wouldn’t be responsive.

Anmerkung%202019-09-06%20115655
Anmerkung%202019-09-06%201156551225×817 64.9 KB

Here is the actual page layout for this.

Thank you for your time

4

I am ashamed to admit it, but I have spent an hour trying to make it work, and I am completely stumped… I don’t understand why that script is not working…

As an alternative I would suggest to make a slider using interactions (with the interaction hiding one div and showing another… its pretty straight forward…

Sorry

5

Thank you very much for trying! I also considered this and will probably try it. Maybe samliew will look into it :sweat_smile:

6

Do you know if this will work for touch too?

7

if you mean interaction - yes it will.

8

I meant if you could drag and let go to slide

9

for that you would need to do some custom script - not sure which one… you wouldn’t be able to do it with built in functionality of Webflow

10

Following some tutorials I found a solution:

  1. I created a div block with a width of 1040px and set it position to RELATIVE (important)
  2. Create the slider inside of it, with a width of 940px
  3. The arrow elements parent (Left Arrow and Right Arrow links), set them to 50x50px and ABSOLUTE.

Now the arrows will position themselves inside the relative div and you can set them to left and right.