slick slider dots repositioning

Question

В моем проекте я использую плагин slick slider (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> 

My 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. Возможно ли это?

Визуальное представление: http://i.stack.imgur.com/jmocB.png

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

Answer 1

Слайк генерирует пятна в пределах 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

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

Answer 3

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