側面導航打開或關閉時重新加載貓頭鷹旋轉木馬2

Question

我正在一個網站上工作，它是一個主題。 在該網站的主體中，其結構為具有容納導航的左面板div和容納主體內容的右面板div。

當左側面板從折疊視圖（僅顯示圖標）打開到完整視圖（顯示導航文本）時，owl-carousel由於在頁面加載時加載，因此不會重新調整寬度。

我已經嘗試了一些方法來嘗試重新加載輪播，遵循他們的API ，但我沒有成功。 正文沒有設置寬度，例如內聯樣式，而是在left-menu-open時設置左側菜單打開類。

我還看了幾個人試圖做同樣事情的其他案例，但他們的代碼示例都沒有用。

以下是我的代碼。 我在.php文件中運行它，因此我可以在正文內容中加載多個滑塊，而不會相關地旋轉。 輪播加載和運行正常，只是如果頁面加載導航打開並且關閉導航，它開始剪輯，或者第三張幻燈片顯示頁面加載導航關閉並打開。

我嘗試過的一種方法是

if ( $( 'body' ).resize() { }

if ( $( 'body' ).hasClass( 'left-nav-open' ) { } else if ( !$( 'body ').resize() { }

(function($) {
  $(function() {
    var $owl = $('.owl-<?php echo $owl_widget_title; ?>');

    $owl.owlCarousel({
      // your initial option here, again.
      loop:true,
      nav:true,
      navText: ["<i class=\"fa fa-chevron-left\"></i>","<i class=\"fa fa-chevron-right\"></i>"],
      dots: false,
      lazyLoad: true,
      lazyContent: true,
      autoplaySpeed: 1000,
      autoplayTimeout: 7000,
      autoplayHoverPause: true,
      responsive : {
        0 : {
          items: 1,
          slideBy: 1,
          autoHeight:true,
        },
        992 : {
          items: <?php echo $num_of_items; ?>,
          slideBy: <?php echo $num_of_items; ?>,
        }
      }
    });

  });

})(jQuery)

我已經嘗試了destroy.owl.carousel ，然后是initialize.owl.carousel但這些似乎都沒有工作或運行。

任何和所有的幫助表示贊賞！ 謝謝

Answer 1

要在調整容器大小后更新owl，需要在其data上調用.onResize() _ handle 。 updateOwl()函數應如下所示：

updateOwl = function(){
  $(".owl-carousel").each(function() {
    $(this).data('owl.carousel').onResize();
  });
};

觀看的唯一的事情是，當恰好調用這個函數 。 我假設側邊欄沒有跳到位置，而是平滑地動畫。 對.onResize()的調用需要延遲動畫的持續時間，因此旋轉木馬的大小是根據最終內容大小計算的。 通過將updateOwl()包裝到setTimeout() （等於或略長於側邊欄動畫持續時間）來延遲執行updateOwl() ）：

$(document).on('click', '.sidebarToggle', function(){
  setTimeout(function(){
    updateOwl();        
  },   321)
});

...其中.sidebarToggle將是你的側邊欄開場白。

工作范例：

 (function($) { var $owl = $('.owl-carousel'), updateOwl = function(){ $owl.each(function() { $(this).data('owl.carousel').onResize(); }); }; $owl.owlCarousel({ loop: true, nav: true, navText: ['<i class="fa fa-chevron-left"></i>', '<i class="fa fa-chevron-right"></i>'], dots: false, lazyLoad: true, autoplaySpeed: 1000, autoplayTimeout: 7000, autoplayHoverPause: true, responsive: { 0: { items: 1, slideBy: 1, autoHeight: true, }, 992: { items: 3, slideBy: 3, } } }); $(document).on('click', '.sidebarToggle', function(){ $('body').toggleClass('sidebarOpen'); setTimeout(function(){ updateOwl(); }, 321) }); $(window).on('resize', updateOwl); })(jQuery) 

 body { margin: 0; transition: padding-left .3s cubic-bezier(.4,0,.2,1); } .sidebar { height: 100vh; position: absolute; width: 200px; background-color: #888; left: -200px; top:0; transition: left .3s cubic-bezier(.4,0,.2,1); box-sizing: border-box; } .sidebarOpen .sidebar { left: 0; } body.sidebarOpen { padding-left: 200px; } .owl-carousel .owl-item { padding: 0 45px; box-sizing: border-box; } .owl-carousel .owl-item > div{ min-height: 135px; width: 100%; border: 1px solid #ccc; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: Gainsboro; border-radius: 3px; } button { margin: 15px; } .owl-carousel { position: relative; margin: 15px 0 0; } .owl-nav >div { position: absolute; top: 50%; width: 20px; transform: translate(-50%, -50%); text-align: center; } .owl-prev {left: 20px} .owl-next {left: calc(100% - 20px);} 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script> <div class="sidebar"></div> <div class="owl-carousel"> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> </div> <button class="sidebarToggle">SidebarToggle</button> 

如果以上內容對您不起作用，我需要查看您的實現以便能夠對其進行調試。

附注： lazyContent目前無法使用。 根據插件作者：

... lazyContent是在beta測試期間引入的，但由於實施lazyContent ，我將其從最終版本中刪除。 這是一個不錯的選擇，所以我將在最近的功能中工作。

Answer 2

我使用destroy.owl.carousel來破壞旋轉木馬。 旋轉木馬重新初始化單擊左側導航菜單

 var $owl = $('.owl-carousel'); /*inital on load */ $owl.owlCarousel({ items: 6, lazyLoad: true, loop: true, margin: 10, }); /*on click of navigation menu */ function resizeCarosel(obj) { if (obj.classList.contains('is-open')) { $owl.trigger('destroy.owl.carousel'); /*destroy Carousel*/ $owl.owlCarousel({ /*reinitialize Carousel*/ items: 6, lazyLoad: true, loop: true, margin: 10, }); } if (obj.classList.contains('is-closed')) { $owl.trigger('destroy.owl.carousel'); /*destroy Carousel*/ $owl.owlCarousel({ /*reinitialize Carousel*/ items: 2, lazyLoad: true, loop: true, margin: 10, /*for responsive items: 4, responsiveClass: true, responsive: { 0: { items: 1, nav: true }, 600: { items: 3, nav: false }, 1000: { items: 5, nav: true, loop: false } } */ }); } } 

 <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="https://rawgit.com/FragCoder/bootstrap-left-slide-menu/master/bootstrap-left-slide-menu.css"> <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script type="text/javascript" src="https://rawgit.com/FragCoder/bootstrap-left-slide-menu/master/bootstrap-left-slide-menu.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/assets/owl.carousel.css"> <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/assets/owl.theme.default.css"> <script type="text/javascript" src="https://cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/owl.carousel.js"></script> <div id="wrapper" class=""> <div class="overlay" style="display: none;"></div> <nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation"> <ul class="nav sidebar-nav"> <li class="sidebar-brand"> <a href="#"> BLESM </a> </li> <li> <a href="#"><i class="glyphicon glyphicon-camera"></i> Photo</a> </li> <li> <a href="#"><i class="glyphicon glyphicon-facetime-video"></i> Video</a> </li> <li> <a href="#"><i class="glyphicon glyphicon-headphones"></i> Music</a> </li> <li> <a href="#"><i class="glyphicon glyphicon-cloud"></i> Cloud</a> </li> <li> <a href="#"><i class="glyphicon glyphicon-th"></i> Apps</a> </li> <li> <a href="#"><i class="glyphicon glyphicon-cog"></i> Settings</a> </li> </ul> </nav> <div id="page-content-wrapper"> <button type="button" class="hamburger animated fadeInLeft is-closed" data-toggle="offcanvas" onclick="resizeCarosel(this)"> <span class="hamb-top"></span> <span class="hamb-middle"></span> <span class="hamb-bottom"></span> </button> <div class="container"> <div class="owl-carousel owl-theme"> <img class="owl-lazy" data-src="https://placehold.it/350x250&text=1" data-src-retina="https://placehold.it/350x250&text=1-retina" alt=""> <img class="owl-lazy" data-src="https://placehold.it/350x250&text=2" data-src-retina="https://placehold.it/350x250&text=2-retina" alt=""> <img class="owl-lazy" data-src="https://placehold.it/350x250&text=3" alt=""> <img class="owl-lazy" data-src="https://placehold.it/350x250&text=4" alt=""> <img class="owl-lazy" data-src="https://placehold.it/350x250&text=5" alt=""> <img class="owl-lazy" data-src="https://placehold.it/350x250&text=6" alt=""> <img class="owl-lazy" data-src="https://placehold.it/350x250&text=7" alt=""> <img class="owl-lazy" data-src="https://placehold.it/350x250&text=8" alt=""> <img class="owl-lazy" data-src="https://placehold.it/350x250&text=9" alt=""> <img class="owl-lazy" data-src="https://placehold.it/350x250&text=10" alt=""> <img class="owl-lazy" data-src="https://placehold.it/350x250&text=11" alt=""> </div> </div> </div> </div> 

Answer 3

您應該能夠通過簡單地從DOM中刪除元素來完成工作（jquery有一個函數.remove（）），然后完全按照第一個那樣重新創建。 請注意，您必須將來自服務器的變量存儲在客戶端中。

Answer 4

1. 我建議觸發refresh.owl.carousel事件 。

2. 我的側邊欄使用轉換，因此我需要檢測transitionend事件 。

3. 我已將.main塊設置為responsiveBaseElement 。 現在，輪播將調整到其容器的寬度，而不是整個頁面的寬度。

4. 我添加了一些跳轉點，使響應式更改更加明顯。

請檢查結果。 這是你想要達到的目標嗎？

https://codepen.io/glebkema/pen/zwozRx

 var $owl = $('#myCarousel'); var owl = $owl.owlCarousel({ autoplay: true, autoplayHoverPause: true, dots: false, loop: true, nav: true, navText: [ "<i class=\\"fa fa-chevron-left\\"></i>", "<i class=\\"fa fa-chevron-right\\"></i>" ], responsiveBaseElement: '.main', responsive : { 0 : { items: 1, slideBy: 1, }, 400 : { items: 2, slideBy: 1, }, 768 : { items: 3, slideBy: 2, }, 992 : { items: 4, slideBy: 2, }, 1200 : { items: 5, slideBy: 2, }, }, }); $('.sidebar-switcher').click(function(){ $('body').toggleClass( 'body-open' ); $('.main').one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", function(event) { owl.trigger('refresh.owl.carousel'); }); }); 

 * { box-sizing: border-box; } body { margin: 0; } /** sidebar closed **/ .main, .sidebar { -webkit-transition: margin .4s ease-out; -moz-transition: margin .4s ease-out; -ms-transition: margin .4s ease-out; -o-transition: margin .4s ease-out; transition: margin .4s ease-out; } .main { padding: 0 36px; margin-left: 70px; } .sidebar { background: #ccc; float: left; height: 100vh; margin-left: -230px; position: relative; width: 300px; } .sidebar-switcher { position: absolute; top: 12px; right: 12px; } .sidebar-switcher:before { content: '\\f0c9'; cursor: pointer; font-family: 'FontAwesome'; font-size: 30px; line-height: 1; position: absolute; top: 12px; right: 12px; } /** sidebar opened **/ .body-open .main { margin-left: 300px; } .body-open .sidebar { margin-left: 0; } .body-open .sidebar-switcher:before { content: '\\f00d'; } /** owl carousel **/ .owl-item > div { margin: 12px; } .owl-next, .owl-prev { position: absolute; top: 0; width: 36px; bottom: 0; } .owl-next { left: 100%; margin-left: -12px; } .owl-prev { right: 100%; margin-right: -12px; } .owl-next i, .owl-prev i { font-size: 30px; line-height: 24px; margin-top: -12px; position: absolute; top: 50%; } .owl-next i { left: 12px; } .owl-prev i { right: 12px; } .owl-next:hover i, .owl-prev:hover i { color: red; } 

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="sidebar"> <div class="sidebar-switcher"></div> </div> <div class="main"> <div class="owl-carousel" id="myCarousel"> <div><img src="//placehold.it/400x200/fc3/fff/?text=1" alt=""></div> <div><img src="//placehold.it/400x200/693/fff/?text=2" alt=""></div> <div><img src="//placehold.it/400x200/369/fff/?text=3" alt=""></div> <div><img src="//placehold.it/400x200/f63/fff/?text=4" alt=""></div> <div><img src="//placehold.it/400x200/936/fff/?text=5" alt=""></div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>