How to prevent owlcarousel from destroying custom dots?

Question

I am making a simple carousel using OwlCarousel 2.2.1 and I have run into a problem with custom dots. I have my custom list of categories which I wanted to behave like dots in carousel.

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

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

In my carousel options I have binded them as dots using dotsContainer. This is my require.js part handling the carousel:

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

The first part just decides wheter I am on mobile or desktop and then inits or destroys the carousel accordingly. It works like a charm here, but on mobile, when I destroy the carousel like this jQuery('.js-carousel-vote').trigger('destroy.owl.carousel').removeClass("owl-carousel owl-loaded");, it destroys the whole .category-list list which I obviously need intact.

The reinitialization works fine because it leaves the inside of the carousel intact, but dots are missing because for some reason, the owlcarousel destroys them. I have no idea why it destroys HTML which does not belong to the carousel itself. I imagined when I binded the dots to my custom list that there is simply a reference to it and upon destroying the carousel, it would destroy just the reference.

Answer 1

To anyone interested, I haven't found a way to preserve native dots when destroyed. However I used a workaround so I created my own custom dots and used those.

I set dots: false in the carousel options and then binded my own list of dots to the carousel events like this

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