光滑的滑块将分页移至幻灯片上方

Question

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

\n\n

JS

\n\n

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

\n\n

PHP

\n\n

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

\n\n

超文本标记语言

\n\n

<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>\n    <div aria-live="polite" class="slick-list draggable">\n        <div class="slick-track" style="opacity: 1; width: 4368px; left: 0px;" role="listbox">\n            <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">\n                <div class="overlay__container relative">\n                    <a href="http://www.baopals.com:3000/products/37436993683" title="Jiuchuan Bamboo Bookshelves" tabindex="-1">\n                        <img src="http://example.com" itemprop="image" alt="J" title="" class="img-responsive">\n                        <span itemprop="name" class="slider--name" title="Jiuchuan Bamboo Bookshelves">example</span>\n                    </a>\n                </div>\n                <div class="slide__caption">\n                    <div class="price">\n                        <span>\xef\xbf\xa5xx.xx</span>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <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>\n    <ul class="slick-dots" style="display: block;" role="tablist">\n        <li class="slick-active" aria-hidden="false" role="presentation" aria-selected="true" aria-controls="navigation10" id="slick-slide10">\n            <button type="button" data-role="none" role="button" aria-required="false" tabindex="0">1</button>\n        </li>\n        <li aria-hidden="true" role="presentation" aria-selected="false" aria-controls="navigation11" id="slick-slide11">\n            <button type="button" data-role="none" role="button" aria-required="false" tabindex="0">2</button>\n        </li>\n        <li aria-hidden="true" role="presentation" aria-selected="false" aria-controls="navigation12" id="slick-slide12">\n            <button type="button" data-role="none" role="button" aria-required="false" tabindex="0">3</button>\n        </li>\n        <li aria-hidden="true" role="presentation" aria-selected="false" aria-controls="navigation13" id="slick-slide13">\n            <button type="button" data-role="none" role="button" aria-required="false" tabindex="0">4</button>\n        </li>\n    </ul>\n</div>\n

\n\n

同一页面上有 4 个滑块。如何获得与幻灯片上方而不是下方的正确滑块相关的分页？

\n

Answer 1

Slick 中有一个名为appendDots的选项，您可以在其中将点导航附加到页面中的任何元素。因此，您可以尝试在滑块上方创建一个元素，然后在 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,
});

尝试一下是否适合您。