如何防止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();
        }

        $(window).on('resize', function() {
            if (mainCarousel.data("owlCarousel") !== "undefined") {
                if (window.matchMedia('(min-width: '+minWidth+ 'px)').matches) {
                  _this.initCarousel();
                } else {
                  _this.destroyCarousel();
                }
            }
        });
    },  

    destroyCarousel : function() {
        jQuery('.js-carousel-vote').trigger('destroy.owl.carousel').removeClass("owl-carousel owl-loaded");
    },

    initCarousel: function () {
        $('.js-carousel-vote').each(function() {
            var $elm = $(this);

                options = {
                    items: 1,
                    loop: false,
                    callbacks: true,
                    URLhashListener: true,
                    autoplay: false,
                    responsive: true,
                    margin: 50,
                    nav: true,
                    navSpeed: 500,
                    dots: true,
                    dotsContainer: '.category-list',
                };

            $elm.addClass("owl-carousel");
            jQuery('.owl-carousel').owlCarousel(options);
        });

        //upon clicking on a category the carousel slides to corresponding slide
        $('.category-list').on('click', 'li', function(e) {
            jQuery('.owl-carousel').trigger('to.owl.carousel', [$(this).index(), 250]);
        });

    },
    updateOnDomScan: function() {
        this.init();
    },
    initOnDomScan: function() {
        this.init();
    }
};
return OwlCarouselVote;
});

第一部分只是决定我是在移动端还是桌面端，然后相应地初始化或销毁轮播。它在这里就像一个魅力，但在移动设备上，当我像这样 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]);
    });

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

How to prevent owlcarousel from destroying custom dots?

html

javascript

jquery

owl-carousel