光滑的滑块附加点 [英] Slick slider appendDots inside a slide

问题描述

我添加了光滑的滑块以在我的网站上创建一个滑块.使圆点正常工作并将其附加到幻灯片中是使其达到我想要的位置的唯一方法，但是现在活动状态对圆点不起作用.

I have added slick slider to create a slider on my site. Got the dots working and appended them inside a slide as its the only way to get them in the position I want them but now the active state isn't working on the dots.

可能是因为包含了尽可能多的幻灯片.有人帮我吗?

Probably because it is getting included for as many slides as there is. Anyone help me with this?

$(document).ready(function() {
  $('.main-slider').slick({
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    dots: true,
    appendDots: '.appendDots',
  });
});

<div class="flex-center" style="background-image: url('http://lorempixel.com/1900/400')">
  <div class="flex-inner">
    <div class="container">
      <div class="flex-content">
        <div class="col-md-12">
          <div class="appendDots"></div>
        </div>
        <div class="col-md-12">
          <h2>Distributor of commercial vehicle parts &amp; Accessories</h2>
          <p>To fit European truck &amp; trailers</p>
        </div>

        <div class="col-md-12">
          <a class="button button-background" href="#">Shop Now <span class='glyphicon glyphicon-circle-arrow-right'></span></a>
        </div>
      </div>
    </div>
  </div>
</div>

在此先感谢您的回答.

推荐答案

从文档中，slick期望使用(选择器，htmlString，数组，元素，jQuery对象)，因此您应该执行类似的操作.

From the documentation slick is expecting a (Selector, htmlString, Array, Element, jQuery object) so you should do something like this.

$(document).ready(function() {
  $('.main-slider').slick({
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    dots: true,
    appendDots: $('.appendDots'),
  });
});

这篇关于光滑的滑块附加点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！