slick curseur points de repositionnement

Dans mon projet, je suis à l'aide de la nappe de curseur plugin ( http://kenwheeler.github.io/slick/ ). Je me demandais si il est possible de repositionner la nappe de points. En tant que par défaut ils sont affichés en dessous de la div conteneur qui slick curseur est appliquée. Ce que je veux faire ici, c'est de mettre de la nappe de points à l'intérieur de la coulissantes div blocs. Je n'ai eu aucun problème à réaliser avec des flèches comme je peux référer à la coutume des noms de classe.

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>

Mon JS paramètres ressemble à 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 les points sont affichés ci-dessous l'ensemble slider-fade classe, mais je veux la faire, par exemple, en dessous de la text-box classe. Est-ce réalisable?

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

Objectif est d'obtenir des points ci-dessous les flèches à l'intérieur du bloc.

OriginalL'auteur Chris Birch | 2015-08-26

  1. 8

    Slick génère la nappe de points à l'intérieur d'un div avec la classe .slick-dots. Cette classe a une position absolue. Donc, la façon la plus simple d'obtenir ce que vous voulez, c'est pour ajouter un style à la 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
}
    Merci. Je ne sais pas pourquoi, j'ai essayé ce à la dure.
    j'ai essayé cela, mais les points disparaissent.
    vous pouvez ouvrir une nouvelle question avec un JSFiddle et je vais essayer de vous y aider. Si vous faites cela, il suffit de placer ici un lien à votre question

    OriginalL'auteur Asaf David

  2. 4

    Vous pouvez utiliser "appendDots: $(Element)" dans la Nappe de paramètres.
    Il ajoutera les points pour cet élément.
    Vous pouvez placer cet élément à n'importe quel endroit en utilisant une feuille de style CSS.
    Si vous souhaitez plus de la diapositive, puis vous pouvez utiliser le positionnement absolu ou relatif de l'élément.

    Cela fonctionne parfaitement merci!

    OriginalL'auteur iiR

  3. 0

    Vous pouvez aussi simplement utiliser un overflow: hidden sur l'emballage (le curseur de fondu dans cet exemple). De cette façon il s'enrouler autour de la stratégie dots.

    OriginalL'auteur Thomas VB