如何防止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

    jQuery('.owl-carousel').on('translated.owl.carousel', function(event) {

        $('.category-list li.active').removeClass('active');

        //You have to set your li data attribute to the position it has in carousel

        $('.category-list li[data-slide="'+ event.item.index +'"]').addClass("active");

    });

    //This method moves to corresponding slide upon clicking a category

    $('.category-list').on('click', 'li', function(e) {

        jQuery('.owl-carousel').trigger('to.owl.carousel', [$(this).index(), 250]);

    });