Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 383
Chris Birch Avatar asked Aug 26 '15 06:08

Chris Birch


People also ask

How do you change dot positions on slick slider?

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.

How do you change the initial slide on slick slider?

You can use initialSlide for that. Note that the first slide has the number 0, so if you would like the slider to start from the second slide you would set initialSlide: 1 .


2 Answers

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.

like image 103
iiR Avatar answered Oct 26 '22 22:10

iiR


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
}
like image 45
Asaf David Avatar answered Oct 26 '22 23:10

Asaf David