CODEWITHSUNDEEP
jqueryhtmlsliderslick.js
Chris Birch
Chris Birch

Reputation: 117

How can I reposition the dots in a SlickJS carousel?

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.

Upvotes: 11

Views: 56932

Answers (3)

iiR
iiR

Reputation: 747

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.

Upvotes: 20

Thomas Van Beveren
Thomas Van Beveren

Reputation: 103

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

Upvotes: 0

Asaf David
Asaf David

Reputation: 3297

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
}

Upvotes: 21

Related Questions