Currently I am initializing my slider like so

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="">
    <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)/', '', $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="" 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=":3000/products/37436993683" title="Jiuchuan Bamboo Bookshelves" tabindex="-1">
                        <img src="" 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>

There is 4 sliders on the same page. how do I get the pagination correlated to the correct slider above the slides instead of below?

Currently I am initializing my slider like so

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/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.)/', 'https://img.alicdn.', $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/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.:3000/products/37436993683" title="Jiuchuan Bamboo Bookshelves" tabindex="-1">
                        <img src="http://example." 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>

There is 4 sliders on the same page. how do I get the pagination correlated to the correct slider above the slides instead of below?

• javascript
• jquery
• html

Share Improve this question Follow edited Aug 8, 2016 at 5:55 NooBskie asked Aug 8, 2016 at 5:46 NooBskieNooBskie 3,84111 gold badge3434 silver badges5656 bronze badges 2

• Can you post the actual html generated by PHP? – Albert Israel Commented Aug 8, 2016 at 5:51
• @AlbertIsrael added example html – NooBskie Commented Aug 8, 2016 at 5:56

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

There's an option in Slick called appendDots where you can append the dots navigation to any element in your page. So you may try to create an element above your slider then use this element in your Slick instance:

$('.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,
});

Try if it works for you.

Try this :

.slick-dots{
   bottom:5px;
}

I was able to solve this with the following each loop to prepend to my sliders

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