Append slick arrows inside the slide content

Question

I am using Slick for a slideshow, where I need the arrows to be inside the slide content, so I can position them relative to the slide content instead of the outer container. I use the appendArrows option for this, but then the arrows get appended multiple times and the navigation does not work anymore (also mentioned in this question). I need the arrows to appear left and right of the link (the headlines and link texts can have arbitrary length of course). Is there a way to achieve this?

JS:

$('.product-slideshow').slick({
  appendArrows: '.slider-nav'
});

HTML:

<div class="product-slideshow">
  <div class="slide">
    <div class="content-wrapper">
      <h2 class="text-xxl text-centered">Produkt 1</h2>
      <div class="slider-nav text-centered">
        <a href="#product-1">zum Produkt</a>
      </div>
      <img src="/inc/images/product-1.jpg" alt="Beschreibung Produkt 1" />
    </div>
  </div>
  <div class="slide">
    <div class="content-wrapper">
      <h2 class="text-xxl text-centered">Produkt 2</h2>
      <div class="slider-nav text-centered">
        <a href="#product-2">zum Produkt</a>
      </div>
      <img src="/inc/images/product-2.jpg" alt="Beschreibung Produkt 2" />
    </div>
  </div>
</div>

Headphone

Answer 1

Yes, you can simply add in the html elements you wish to use as arrows and then select them to be used as the previous or next arrow.

$('.product-slideshow').slick({
    prevArrow: $('.prev-slide'),
    nextArrow: $('.next-slide'),
});

In this example you could have an html element with the class of .prev-slide used for the back arrow and an element with the class of .next-slide for the forward arrow.

Monetta

Thanks, it works! I don't understand what's the difference between the two options, though. As far as I see they result in the same HTML, but only my approach breaks the button functionality. – Headphone

Answer 2

As for your personal project, you can accomplish this very easy using the appendArrows option:

$(".slider").slick({  
    appendArrows: ".container"
});

Filamentary