如何防止owlcarousel破坏自定义点？

Question

我正在使用 OwlCarousel 2.2.1 制作一个简单的轮播，但遇到了自定义点的问题。我有我想要在旋转木马中表现得像点的自定义类别列表。

<ul class="category-list">

<li class="category-list__item active" data="1">

  <span class="icon icon--red category-list__bg-icon"><svg>svg stuff here</svg></span>

  <span class="icon icon--white category-list__main-icon"><svg>svg stuff here</svg></span>

  <span class="category-list__title">Category 1</span>

</li>

...

<li class="category-list__item active" data="5">

  <span class="icon icon--red category-list__bg-icon"><svg>svg stuff here</svg></span>

  <span class="icon icon--white category-list__main-icon"><svg>svg stuff here</svg></span>

  <span class="category-list__title">Category 5</span>

</li>

</ul>

我的html：

<div class="vote-project__holder js-carousel-vote" data-owl-min-width="960">

   <div class="row vote-project__duel">Content of slide 1</div>

   ...

   <div class="row vote-project__duel">Content of slide 5</div>

</div>

在我的轮播选项中，我使用 dotsContainer 将它们绑定为点。这是我处理轮播的 require.js 部分：

define(["jquery", "owlCarousel"], function($, owlCarousel) {

 var OwlCarouselVote = {

    init: function() {

        var _this = this,

            mainCarousel = $('.js-carousel-vote'),

            minWidth = mainCarousel.data('owl-min-width') ? mainCarousel.data('owl-min-width') : 0;

        if (window.matchMedia('(min-width: '+minWidth+ 'px)').matches) {

            _this.initCarousel();

        }

第一部分只是决定我是在移动设备上还是桌面上，然后相应地初始化或销毁轮播。它在这里就像一个魅力，但在移动设备上，当我像这样破坏轮播时jQuery('.js-carousel-vote').trigger('destroy.owl.carousel').removeClass("owl-carousel owl-loaded");，它会破坏整个 .category-list 列表，我显然需要完整无缺。

重新初始化工作正常，因为它使旋转木马的内部完好无损，但由于某种原因，猫头鹰旋转木马破坏了它们，因此缺少点。我不知道为什么它会破坏不属于轮播本身的 HTML。我想象当我将点绑定到我的自定义列表时，只有一个对它的引用，而在销毁轮播时，它只会销毁引用。

Answer 1

对于任何感兴趣的人，我还没有找到一种方法来在销毁时保留原生点。但是我使用了一种解决方法，因此我创建了自己的自定义点并使用了它们。我设置dots: false了轮播选项，然后将我自己的点列表绑定到像这样的轮播事件// This method listens to sliding and afterwards sets corresponding category to active&nbsp; &nbsp; jQuery('.owl-carousel').on('translated.owl.carousel', function(event) {&nbsp; &nbsp; &nbsp; &nbsp; $('.category-list li.active').removeClass('active');&nbsp; &nbsp; &nbsp; &nbsp; //You have to set your li data attribute to the position it has in carousel&nbsp; &nbsp; &nbsp; &nbsp; $('.category-list li[data-slide="'+ event.item.index +'"]').addClass("active");&nbsp; &nbsp; });&nbsp; &nbsp; //This method moves to corresponding slide upon clicking a category&nbsp; &nbsp; $('.category-list').on('click', 'li', function(e) {&nbsp; &nbsp; &nbsp; &nbsp; jQuery('.owl-carousel').trigger('to.owl.carousel', [$(this).index(), 250]);&nbsp; &nbsp; });