javascript - 光滑的 slider 将分页移至幻灯片上方

Question

目前我正在像这样初始化我的 slider

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 个 slider 。如何获得与幻灯片上方而不是下方的正确 slider 相关的分页？

Answer 1

Slick 中有一个名为 appendDots 的选项，您可以在其中将点导航附加到页面中的任何元素。因此，您可以尝试在 slider 上方创建一个元素，然后在 Slick 实例中使用该元素:

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

尝试一下它是否适合您。