Скользящий слайдер точек репозиционирование

Question

В моем проекте я использую плагин для скользящего слайдера ( http://kenwheeler.github.io/slick/). Мне было интересно, если это возможно, чтобы изменить положение скользких точек. По умолчанию они отображаются под контейнером div, для которого применяется скользкий слайдер. Чего я хочу добиться здесь, так это поместить гладкие точки в скользящие блоки div. У меня не было проблем, чтобы достичь этого с помощью стрелок, так как я могу ссылаться на них с помощью имен пользовательских классов.
Мой HTML выглядит так:

<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>

Мои настройки JS выглядят так:

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

Итак, как я уже говорил, точки отображаются под всем slider-fade класс, но я хочу получить его, например, ниже text-box учебный класс. Это достижимо?

Визуальное представление:

Цель состоит в том, чтобы получить точки ниже стрелок внутри блока.

Answer 1

Slick генерирует гладкие точки внутри div с классом .slick-dots, Этот класс имеет абсолютную позицию. Так что самый простой способ достичь желаемого - это добавить стили к этому 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
}

Answer 2

Вы можете использовать "appendDots: $(Element)" в настройках Slick. Это добавит точки к этому элементу. Вы можете разместить этот элемент в любом месте, используя обычный CSS. Если вы хотите, чтобы оно было над слайдом, вы можете использовать абсолютное или относительное позиционирование элемента.

Answer 3

Вы также можете просто использовать overflow: hidden на обертке (ползунок в этом примере). Таким образом, он будет обтекать точки.