web-dev-qa-db-de.com

slick Slider Dots Neupositionierung

In meinem Projekt verwende ich Slick Slider Plugin ( http://kenwheeler.github.io/slick/ ). Ich habe mich gefragt, ob es möglich ist, Slick Dots neu zu positionieren. Standardmäßig werden sie unter dem Div-Container angezeigt, für den der Slick-Slider angewendet wird. Was ich hier erreichen möchte, ist, glatte Punkte in die gleitenden Div-Blöcke zu setzen. Ich hatte kein Problem, dies mit Pfeilen zu erreichen, da ich mit benutzerdefinierten Klassennamen auf sie verweisen kann.
Mein HTML sieht so aus:

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

Meine JS-Einstellungen sehen folgendermaßen aus:

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

Wie bereits erwähnt, werden Punkte unterhalb der gesamten Klasse slider-fade angezeigt, ich möchte sie jedoch beispielsweise unterhalb der Klasse text-box anzeigen. Ist das erreichbar?

Visuelle Darstellung: http://i.stack.imgur.com/jmocB.png

Ziel ist es, Punkte unter den Pfeilen im Block zu bekommen.

5
Chris Birch

Slick generiert die Slick-Punkte in einem Div mit der Klasse .slick-dots. Diese Klasse hat eine absolute Position. Der einfachste Weg, um das zu erreichen, was Sie wollen, ist das Hinzufügen von Styling zu diesem 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
}
7
Asaf David

Sie können "appendDots: $ (Element)" in den Slick-Einstellungen verwenden. Die Punkte werden an dieses Element angehängt. Sie können dieses Element mit normalem CSS an einer beliebigen Stelle platzieren. Wenn Sie es über der Folie möchten, können Sie die absolute oder relative Positionierung auf dem Element verwenden.

4
iiR

Sie können auch einfach einen overflow: hidden auf dem Wrapper verwenden (Schieberegler in diesem Beispiel). Auf diese Weise werden die Punkte umwickelt.

0
Thomas VB