web-dev-qa-db-fra.com

repositionnement points slider slider

Dans mon projet, j'utilise un plugin slick slider ( http://kenwheeler.github.io/slick/ ). Je me demandais s'il était possible de repositionner des points lisses. Par défaut, ils sont affichés sous le conteneur div pour lequel le curseur lisse est appliqué. Ce que je veux réaliser ici est de mettre des points lisses à l’intérieur des blocs coulissants. Je n’ai eu aucun problème à y parvenir avec des flèches, car je peux y faire référence avec des noms de classes personnalisés.
Mon code HTML ressemble à ceci:

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

Mes paramètres JS ressemblent à ceci:

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

Donc, comme je l’ai mentionné maintenant, des points sont affichés sous la classe slider-fade entière, mais je souhaite l’obtenir, par exemple, sous la classe text-box. Est-ce réalisable?

Représentation visuelle: http://i.stack.imgur.com/jmocB.png

Le but est d'obtenir des points sous les flèches à l'intérieur du bloc.

jqueryhtmlsliderslick.js
5
Chris Birch

Slick génère les points lisses à l’intérieur d’un div avec la classe .slick-dots. Cette classe a une position absolue. Donc, le moyen le plus simple d’atteindre ce que vous voulez est d’ajouter du style à cette 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

Vous pouvez utiliser "appendDots: $ (Element)" dans les paramètres Slick. Il ajoutera les points à cet élément. Vous pouvez placer cet élément n'importe où en utilisant du CSS normal. Si vous le souhaitez sur la diapositive, vous pouvez utiliser le positionnement absolu ou relatif sur l'élément.

4
iiR

Vous pouvez aussi simplement utiliser un overflow: hidden sur le wrapper (slider-fade dans cet exemple). De cette façon, ça va envelopper les points.

0
Thomas VB