侧面导航打开或关闭时重新载入猫头鹰旋转木马2

时间：2017-04-12 13:44:00

标签： javascript jquery owl-carousel-2

我正在一个网站上工作，它是一个主题。在该网站的主体结构中，有一个左侧面板div，其中包含导航和一个右侧面板div，其中包含正文内容。

当左侧面板从折叠视图（仅显示图标）打开到完整视图（显示导航文本）时，owl-carousel由于在页面加载时加载，因此不会重新调整宽度。

在their 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，但这些似乎都没有工作或运行。

感谢任何和所有帮助！谢谢

4 个答案:

答案 0 :(得分：2)

要在调整容器大小后更新owl，需要在.onResize()上调用data _handler 。 updateOwl()函数应如下所示：

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

唯一要注意的是 完全时调用此功能。我假设侧边栏没有跳到位置，而是平滑地动画。对.onResize()的调用需要延迟动画的持续时间，因此旋转木马的大小是根据最终内容大小计算的。通过将updateOwl()包裹到setTimeout()（等于或略长于侧边栏动画持续时间）来延迟$(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)将成为你的侧栏开启者。

工作示例：

＆＃13;
＆＃13; 
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);}
＆＃13; 
<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>
＆＃13; 
lazyContent
＆＃13;
＆＃13;
＆＃13;

如果以上内容对您不起作用，我需要查看您的实现，以便能够对其进行调试。

旁注： lazyContent目前无法使用。根据插件作者：

  在beta测试期间引入了

... {{1}}，但由于实施不当，我将其从最终版本中删除了。这是一个很好的选择，所以我将在最近的功能中进行处理。

答案 1 :(得分：1)

我使用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>

答案 2 :(得分：0)

您应该能够通过简单地从DOM中删除元素来完成工作（jquery有一个函数.remove（）），然后完全按照第一个那样重新创建。请注意，您必须将来自服务器的变量存储在客户端中。

答案 3 :(得分：-1)

  1. 我建议触发the refresh.owl.carousel event。

  2. 我的侧边栏使用转换功能，因此我需要检测the transitionend event。

  3. 我已将.main块设为the responsiveBaseElement。现在轮播将调整到其容器的宽度，而不是整个页面的宽度。

  4. 我已经添加了一些跳跃点，以使响应更改更多 可见。

    5. 请检查结果。这是你想要实现的目标吗？

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

    ＆＃13;
    ＆＃13; 
    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');
  });
});
    ＆＃13; 
    * { 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;
}
    ＆＃13; 
    <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>
    ＆＃13;
    ＆＃13;
    ＆＃13;

相关问题
最新问题