滑动滑块在幻灯片内附加点 [英] 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>

提前感谢您的任何回答.

Thank you in advance for any answers.

推荐答案

从文档中 slick 期待一个 (Selector, htmlString, Array, Element, jQuery object) 所以你应该做这样的事情.

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屋！