侧面导航打开或关闭时重新加载猫头鹰旋转木马2-Java 学习之路

我正在一个网站上工作，它是一个主题 . 在该网站的主体中构造成具有容纳导航的左侧面板和容纳主体内容的右侧面板 .

当左侧面板从折叠视图（仅显示图标）打开到完整视图（显示导航文本）时，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 回答

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

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

唯一需要注意的是当 exactly 调用此函数时 . 我假设侧边栏没有跳到位置，而是平滑地动画 . 对 .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>

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

Side note: lazyContent 目前无法使用 . 根据插件作者：

... lazyContent是在beta测试期间引入的，但由于实施不当，我将其从最终版本中删除 . 这是一个不错的选择，所以我将在最近的功能中工作 .

回复于 2024-04-27T01:08:27+08:00

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

回复于 2024-04-27T01:08:27+08:00

-1

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

回复于 2024-04-27T01:08:27+08:00

我建议触发the refresh.owl.carousel event .
我的侧边栏使用转换，所以我需要检测the transitionend event .
我已将 .main 块设置为the responsiveBaseElement . 现在，轮播将调整到其容器的宽度，而不是整个页面的宽度 .
我添加了一些跳跃点，使响应式更改更加明显 .

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

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>

回复于 2024-04-27T01:08:27+08:00

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

4 回答

相关问题