JqueryとOwlCarouselを使用して各リンクをクリックしてカルーセルを表示

Question

私は3つのカルーセルを持っており、それぞれのカルーセルをjqueryを使ってそれぞれのリンクをクリックして表示しようとしています。

私はdivに「display：none」のCSSを追加すると、フローカルーセルは正しく動作しません。カルーセル要素のサイズは縮小し、ときどき消える。 https://jsfiddle.net/prtkvarma/yLjw7gsk/3/

おかげ -

は、私は私が間違って何が起こっているかを見つけることであなたの助けを感謝し、それのためにjsfiddleを行いました。

jQuery(document).ready(function($) { 

    $('.owl-one').owlCarousel({ 
    items: 4, 
    lazyLoad: true, 
    margin: 20, 
    nav: true, 
    dots: false, 
    responsive: { 
     0: { 
     items: 2 
     }, 
     480: { 
     items: 3 
     }, 
     786: { 
     items: 4 
     } 
    } 
    }); 

    $('.owl-two').owlCarousel({ 
    items: 4, 
    lazyLoad: true, 
    margin: 20, 
    nav: true, 
    dots: false, 
    responsive: { 
     0: { 
     items: 2 
     }, 
     480: { 
     items: 3 
     }, 
     786: { 
     items: 4 
     } 
    } 
    }); 

    $('.owl-three').owlCarousel({ 
    items: 4, 
    lazyLoad: true, 
    margin: 20, 
    nav: true, 
    dots: false, 
    responsive: { 
     0: { 
     items: 2 
     }, 
     480: { 
     items: 3 
     }, 
     786: { 
     items: 4 
     } 
    } 
    }); 

    /*Change css of links on click*/ 
    $('.select-link li').click(function() { 
    $('.select-link li').removeClass('active-link'); 
    $(this).addClass('active-link'); 
}); 

/*showing/hiding particular carousels on clicking links*/ 
    $('.link-promotions').click(function() { 
    $('.sec-casino-games').hide(); 
    $('.sec-live-odds').hide(); 
    $(".sec-promotions").show(1000); 
    $(".pic1, .pic2, .pic3, .pic4").hide('slow'); 
    }); 

    $('.link-casino-games').click(function() { 
    $('.sec-promotions').hide(); 
    $('.sec-live-odds').hide(); 
    $(".sec-casino-games").show(1000); 
    $(".pic1, .pic2, .pic3, .pic4").hide('slow'); 
    }); 

    $('.link-live-odds').click(function() { 
    $('.sec-promotions').hide(); 
    $('.sec-casino-games').hide(); 
    $(".sec-live-odds").show(1000); 
    $(".pic1, .pic2, .pic3, .pic4").hide('slow'); 
    }); 

}); 

Answer 1

あなたは、通常の要素にインラインスタイルをハードコード特殊効果に建てから離れて滞在したいという視覚的なユーザーエクスペリエンスの重いレバレッジライブラリ -

後は、コードのちょうどJSの一部です。その理由は、特殊効果を組み込んだjQueryがすべて要素のスタイル属性を直接変更するためです。これは通常、ライブラリCSSルールと衝突します。

私はjQueryのほとんどを書き直して、よりシンプルで、冗長性が低く、合理化されているようにしました。主なことは、あなたの質問に答えるには、.hide()と同じように、.animate()に要素を追加することができる.addClass()メソッドを利用することです。これは、.addClass()メソッドを使用しているときに、秒単位の時間をミリ秒単位で追加することによって行われます。

jQueryの

jQuery(document).ready(function($) { 
    $('.owl-carousel').each(function(index, element) { 
     jQuery(element).owlCarousel({ 
      items: 4, 
      lazyLoad: true, 
      margin: 20, 
      nav: true, 
      dots: false, 
      responsive: { 
       0: { 
        items: 4 
       } 
      } 
     }); 
    }); 

    var owl_content = jQuery('.owl-carousel'); 
    var owl_links = jQuery('.select-link a'); 

    jQuery(owl_links).each(function(index, element) { 
     jQuery(element).click(function(e) { 
      jQuery(owl_content).each(function(i, el) { 
       jQuery(el).addClass('c', 500); 
       if (i === index) { 
        jQuery(owl_content[index]).removeClass('c', 500); 
        console.log(i); 
       } 
      }); 
     }); 
    }); 

    /*Change css of links on click*/ 
    $('.select-link li').click(function() { 
     $('.select-link li').removeClass('active-link'); 
     $(this).addClass('active-link'); 
    }); 

    jQuery('.c.first').removeClass('c'); 
}); 

フィドル

https://jsfiddle.net/dixalex/yLjw7gsk/8/

ソース

animating addClass/removeClass with jquery