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]);
    });

如何防止旋转木马破坏自定义点？

1 个答案: