Je crée un carrousel simple en utilisant OwlCarousel 2.2.1 et j'ai rencontré un problème avec les points personnalisés. J'ai ma liste personnalisée de catégories que je voulais se comporter comme des points dans un carrousel.

<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>

Mon 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>

Dans mes options de carrousel, je les ai liés en tant que points à l'aide de dotsContainer. Voici ma partie require.js qui gère le carrousel :

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


La première partie décide simplement si je suis sur mobile ou sur ordinateur, puis initialise ou détruit le carrousel en conséquence. Cela fonctionne comme un charme ici, mais sur mobile, lorsque je détruis le carrousel comme celui-ci jQuery('.js-carousel-vote').trigger('destroy.owl.carousel').removeClass("owl-carousel owl-loaded");, cela détruit toute la liste .category-list dont j'ai évidemment besoin intacte.

La réinitialisation fonctionne bien car elle laisse l'intérieur du carrousel intact, mais il manque des points car pour une raison quelconque, le carrousel à chouettes les détruit. Je ne sais pas pourquoi il détruit le HTML qui n'appartient pas au carrousel lui-même. J'ai imaginé, lorsque j'ai lié les points à ma liste personnalisée, qu'il y a simplement une référence à celle-ci et qu'en détruisant le carrousel, cela ne détruirait que la référence.

0
Arcane 7 oct. 2019 à 17:46

1 réponse

Meilleure réponse

Pour toute personne intéressée, je n'ai pas trouvé de moyen de préserver les points natifs lorsqu'ils sont détruits. Cependant, j'ai utilisé une solution de contournement, j'ai donc créé mes propres points personnalisés et les ai utilisés.

J'ai défini dots: false dans les options du carrousel, puis j'ai lié ma propre liste de points aux événements du carrousel comme celui-ci

// 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]);
    });
0
Arcane 10 oct. 2019 à 09:36