Как предотвратить совую карусель от уничтожения пользовательских точек? - PullRequest
Новая
       11

Как предотвратить совую карусель от уничтожения пользовательских точек?

0 голосов
/ 07 октября 2019

Я делаю простую карусель, используя 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, который не принадлежит самой карусели. Когда я связывал точки с моим пользовательским списком, я представлял, что на него есть просто ссылка, а при уничтожении карусели она уничтожит только ссылку.

1 Ответ

0 голосов
/ 10 октября 2019

Для тех, кто заинтересован, я не нашел способа сохранить нативные точки при уничтожении. Однако я использовал обходной путь, поэтому я создал свои собственные точки и использовал их.

Я установил 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]);
    });
...