How can I move slider arrows to a different position inside the slider?

[brilliantlights]

Hi

I am trying to achieve this slider design in the attached picture, but when i’m trying to edit my slider i can’t move the slider arrows to a different position just like the pic. Is there a way i can achieve that?

@samliew , @sabanna , @cyberdave

[brilliantlights]

Any help? Please assist me.

[coolest_vlad (Vlad Radchenko)]

Ill be glad to assist you @brilliantlights.

Before we do anything though, can you please share your read only link with me so I could see where you are currently and help you from there? Thanks!

Share a project's read-only link | Webflow University

[brilliantlights]

Thanks for assisting.

I was playing around with absolute positioning but i don’t know if my method is the standard and perfect way. I fear the client might view the arrow icons differently on a different browser.

https://preview.webflow.com/preview/koad?preview=de430d5f144f3c4a4692cdfc1d6c20fc

Please help me check the arrow positioning if thats the best way to do it

[samliew (samliew.com)]

The slider number element is not done properly.

You will have to do the following before I can help you:

• First, undo the changes on the slider arrows back to it’s original position. Hide them (not delete!) if you want to.

• Second, recreate the arrows in the position that you want. One link block per arrow. Do not lump them together with the 1-10 text in the middle like what you have done.

• Third, give your slider an ID of myCustomSlider.

[brilliantlights]

Thanks @samliew

Where i can’t figure out is the step two because thats what i want to achieve just like the image in the first post. I used absolute positioning to move them around in % but i’m scared the client might view it differently on a different laptop screen size.

I have done 1 and 3 but if you can help me with my request, i’ll be glad.

[samliew (samliew.com)]

I’m not asking you to modify the arrows, I’m asking you to create a new set, that I will help you link to the hidden ones. You can place them anywhere in the page.

[brilliantlights]

I have created a new slider (a copy of the older one) if that’s what you mean but the slider arrows are in their default position.

[samliew (samliew.com)]

No, don’t duplicate the entire slider. Make new arrows. Hide the real one.

[brilliantlights]

Thanks @samliew i have done exactly as you instructed. How do i link the custom arrows to the slider arrows? You are the best!

[samliew (samliew.com)]

Wonderful. One last step, I need this to see the actual output of your site to write the code, so could you publish and send me the live link?

[brilliantlights]

Great.

Here it is: https://preview.webflow.com/preview/koad?preview=de430d5f144f3c4a4692cdfc1d6c20fc

http://koad.webflow.io

[samliew (samliew.com)]

I assume this slider exists on this page only.

Open up page settings §, click on the gear icon of this page,
go all the way to the bottom to Custom Code > Footer Code, and paste this inside:

<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>

Save and publish and view at http://koad.webflow.io