亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何防止owlcarousel破壞自定義點?

如何防止owlcarousel破壞自定義點?

狐的傳說 2021-11-12 10:54:10
我正在使用 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();        }第一部分只是決定我是在移動設備上還是桌面上,然后相應地初始化或銷毀輪播。它在這里就像一個魅力,但在移動設備上,當我像這樣破壞輪播時jQuery('.js-carousel-vote').trigger('destroy.owl.carousel').removeClass("owl-carousel owl-loaded");,它會破壞整個 .category-list 列表,我顯然需要完整無缺。重新初始化工作正常,因為它使旋轉木馬的內部完好無損,但由于某種原因,貓頭鷹旋轉木馬破壞了它們,因此缺少點。我不知道為什么它會破壞不屬于輪播本身的 HTML。我想象當我將點綁定到我的自定義列表時,只有一個對它的引用,而在銷毀輪播時,它只會銷毀引用。
查看完整描述

1 回答

?
慕田峪7331174

TA貢獻1828條經驗 獲得超13個贊

對于任何感興趣的人,我還沒有找到一種方法來在銷毀時保留原生點。但是我使用了一種解決方法,因此我創建了自己的自定義點并使用了它們。


我設置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]);

    });


查看完整回答
反對 回復 2021-11-12
  • 1 回答
  • 0 關注
  • 185 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號