javascript - Slick Slider Move Pagination Above Slides

Currently I am initializing my slider like so

$('.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

$('.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?

Share Improve this question edited Aug 8, 2016 at 5:55 asked Aug 8, 2016 at 5:46 NooBskie 3,8411 gold badge34 silver badges56 bronze badges

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" )));
});

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Slick Slider Move Pagination Above Slides - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)