Chris Birch Chris Birch - 2 years ago 222
HTML Question

slick slider dots repositioning

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: http://i.stack.imgur.com/jmocB.png

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

Answer Source

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
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download