スリックスライダー移動改ページの上スライド

Question

現在、私はJS

ので

ように私のスライダーを初期化しています

$('.responsive-slider').slick({ nextArrow: '<span class="slick-divider right"></span><i class="fa fa-chevron-right"></i>', prevArrow: '<span class="slick-divider left"></span><i class="fa fa-chevron-left"></i>', dots: true, infinite: false, speed: 300, slidesToShow: 6, slidesToScroll: 6, }); 

PHP

<div class="responsive-slider feat-slider-container"> 
    <?php foreach ($products as $i => $product) { $i=$i+1; ?> 
    <div class="slide" itemscope itemtype="http://schema.org/Product"> 
    <div class="overlay__container relative"> 
     <a href="<?php echo $product['href']; ?>" title="<?php echo $product['name'];?>"> 
     <img 
     src="<?php $product['thumb'] = preg_replace('/(http:\/\/gd\d.alicdn.com)/', 'https://img.alicdn.com', $product['thumb']); echo $product['thumb']; ?>" 
     itemprop="image" 
     alt="<?php echo $product['name']; ?>" 
     title="<?php echo $product['name'];?>" 
     class="img-responsive" /> 
     <span itemprop="name" class="slider--name" title="<?php echo $product['name'];?>"><?php echo $product['pname']; ?></span> 
     </a> 
    </div> 
    <div class="slide__caption"> 
     <div class="price"> 
     <span><?php echo $product['price']; ?></span> 
     </div> 
    </div> 
    </div> 
    <?php } ?> 
</div> 

HTML

<div class="responsive-slider feat-slider-container slick-initialized slick-slider" role="toolbar"><span class="slick-divider left slick-arrow slick-disabled" aria-disabled="true" style="display: block;"></span><i class="fa fa-chevron-left slick-arrow slick-disabled" aria-disabled="true" style="display: block;"></i> 
    <div aria-live="polite" class="slick-list draggable"> 
     <div class="slick-track" style="opacity: 1; width: 4368px; left: 0px;" role="listbox"> 
      <div class="slide slick-slide" itemscope="" itemtype="http://schema.org/Product" data-slick-index="9" aria-hidden="true" style="width: 172px;" tabindex="-1" role="option" aria-describedby="slick-slide19"> 
       <div class="overlay__container relative"> 
        <a href="http://www.baopals.com:3000/products/37436993683" title="Jiuchuan Bamboo Bookshelves" tabindex="-1"> 
         <img src="http://example.com" itemprop="image" alt="J" title="" class="img-responsive"> 
         <span itemprop="name" class="slider--name" title="Jiuchuan Bamboo Bookshelves">example</span> 
        </a> 
       </div> 
       <div class="slide__caption"> 
        <div class="price"> 
         <span>￥xx.xx</span> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <span class="slick-divider right slick-arrow" style="display: block;" aria-disabled="false"></span><i class="fa fa-chevron-right slick-arrow" style="display: block;" aria-disabled="false"></i> 
    <ul class="slick-dots" style="display: block;" role="tablist"> 
     <li class="slick-active" aria-hidden="false" role="presentation" aria-selected="true" aria-controls="navigation10" id="slick-slide10"> 
      <button type="button" data-role="none" role="button" aria-required="false" tabindex="0">1</button> 
     </li> 
     <li aria-hidden="true" role="presentation" aria-selected="false" aria-controls="navigation11" id="slick-slide11"> 
      <button type="button" data-role="none" role="button" aria-required="false" tabindex="0">2</button> 
     </li> 
     <li aria-hidden="true" role="presentation" aria-selected="false" aria-controls="navigation12" id="slick-slide12"> 
      <button type="button" data-role="none" role="button" aria-required="false" tabindex="0">3</button> 
     </li> 
     <li aria-hidden="true" role="presentation" aria-selected="false" aria-controls="navigation13" id="slick-slide13"> 
      <button type="button" data-role="none" role="button" aria-required="false" tabindex="0">4</button> 
     </li> 
    </ul> 
</div> 

同じページに4つのスライダがあります。下の代わりにスライド上の正しいスライダにページ番号を関連付けるにはどうすればよいですか？

Answer 1

これを試してみてください：

.slick-dots{ 
    bottom:5px; 
} 

Answer 2

私は私のスライダーにprependに各ループを以下でこれを解決することができた

$(".responsive-slider").each(function(index) { 
    $(this).prepend($(this).find($(".slick-dots"))); 
}); 

Answer 3

呼ばスリックでのオプションがありますappendDotsあなたが追加することができますあなたのページ内の任意の要素へのドットナビゲーション。それはあなたのために働く場合

$('.responsive-slider').slick({ 
    nextArrow: '<span class="slick-divider right"></span><i class="fa fa-chevron-right"></i>', 
    prevArrow: '<span class="slick-divider left"></span><i class="fa fa-chevron-left"></i>', 
    dots: true, 
    infinite: false, 
    appendDots: $('element-to-append-dots-nav'), 
    speed: 300, 
    slidesToShow: 6, 
    slidesToScroll: 6, 
}); 

は試してみてください。つまり、あなたのスリックのインスタンスで、この要素を使用し、あなたのスライダー上記の要素を作成しようとします。