Slider Arrows outside of slider div

Hello everyone,

I am trying to put the slider arrows outside of the slider div through code, as moving them through absolute positioning doesn’t work with some of the effects on the page. Anyway, I am currently using this code:

<script>
var Webflow = Webflow || [];
Webflow.push(function() {
  var l = $('#CustomSlider1 .left-arrow-2 w-slider-arrow-left');
  var r = $('#CustomSlider1 .right-arrow-3 w-slider-arrow-right');
  $('#CustomSlider1')
    .on('click', '.slider-left', function() {
      l.trigger('tap');
    })
    .on('click', '.slider-right', function() {
      r.trigger('tap');
    });
});
</script>

which unfortunately is not working.

Any help will be appreciated.

https://preview.webflow.com/preview/radovenski?utm_medium=preview_link&utm_source=dashboard&utm_content=radovenski&preview=c33c5fb522fc9ce17d5172164fc85c7d&workflow=preview

Note that the new arrows are currently hidden, but you can find them under the control-nav div on the home page.

@samliew I know you have been very useful to many with similar problems, could you help out with that too? Thank you in advance!

There are no sliders on the home page.