滑动滑块在幻灯片内附加点

2022-01-24 00:00:00 slider jquery javascript slick.js

我添加了光滑的滑块来在我的网站上创建一个滑块.让点工作并将它们附加到幻灯片中，这是使它们处于我想要的位置的唯一方法，但现在活动状态不适用于点.

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

相关文章