How can I reposition the dots in a SlickJS carousel?

Question

In my project I'm using slick slider plugin ( http://kenwheeler.github.io/slick/ ). I was wondering if it is possible to reposition slick dots. As default they are displayed below the div container for which slick slider is applied. What I want to achieve here is to put slick dots inside the sliding div blocks. I had no problem to achieve this with arrows as I can refer to them with custom class names.
My html looks like this:

<div class="slider-fade">
 <div>
  <div class="text-box">
   <h2>Lorem ipsum</h2>
   ...additional text
  </div>
 </div>
 <div>
  <div class="text-box">
   <h2>Lorem ipsum</h2>
   ...additional text
  </div>
 </div>
 <div>
  <div class="text-box">
   <h2>Lorem ipsum</h2>
   ...additional text
  </div>
 </div>
</div>

My JS settings looks like this:

$('.slider-fade').slick({
 autoplay: true,
 autoplaySpeed: 3000,
 infinite: true,
 speed: 500,
 fade: true,
 cssEase: 'linear',
 prevArrow: $('.prev'),
 nextArrow: $('.next'),
 dots: true
});

So as I mentioned now dots are displayed below the whole slider-fade class, but I want to get it, for example, below the text-box class. Is this achievable?

Visual representation: https://i.sstatic.net/jmocB.png

Aim is to get dots below the arrows inside the block.

Kola

Answer 1

Slick generates the slick dots inside a div with class .slick-dots. That class has an absolute position. So the easiest way to achieve what you want is to add styling to that div:

.slick-dots {
  top: 100px;  // play with the number of pixels to position it as you want
  left: 100px; // play with the number of pixels to position it as you want
}

Tenedos

Thanks. I don't know why I tried this the hard way. – Kola

@mori you can open a new question with a JSFiddle and i'll try to help you there. If you do so simply place here the link to your question – Tenedos

Note iiR's answer below - it seems better to me – Oruro

This doesn't play well with z-index for me and some click/touches, like on the arrows, get intercepted by the dots container. – Masuria

this is bad on responsiveness when aligning it to left or right – Tymes

Answer 2

You can use "appendDots: $(Element)" in the Slick settings. It will append the dots to that element. You can place that element at any location using normal CSS. If you want it over the slide then you can use absolute or relative positioning on the element.

Marsupium

Answer 3

You can also just use an overflow: hidden on the wrapper (slider-fade in this example). This way it will wrap around the dots.

Chambray