Slick slider appendDots inside a slide

Question

I have added slick slider to create a slider on my site. Got the dots working and appended them inside a slide as its the only way to get them in the position I want them but now the active state isn't working on the dots.

Probably because it is getting included for as many slides as there is. Anyone help me with this?

$(document).ready(function() {
  $('.main-slider').slick({
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    dots: true,
    appendDots: '.appendDots',
  });
});

<div class="flex-center" style="background-image: url('http://lorempixel.com/1900/400')">
  <div class="flex-inner">
    <div class="container">
      <div class="flex-content">
        <div class="col-md-12">
          <div class="appendDots"></div>
        </div>
        <div class="col-md-12">
          <h2>Distributor of commercial vehicle parts &amp; Accessories</h2>
          <p>To fit European truck &amp; trailers</p>
        </div>

        <div class="col-md-12">
          <a class="button button-background" href="#">Shop Now <span class='glyphicon glyphicon-circle-arrow-right'></span></a>
        </div>
      </div>
    </div>
  </div>
</div>

Thank you in advance for any answers.

Answer 1

From the documentation slick is expecting a (Selector, htmlString, Array, Element, jQuery object) so you should do something like this.

$(document).ready(function() {
  $('.main-slider').slick({
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    dots: true,
    appendDots: $('.appendDots'),
  });
});