jquery - Owl Carousel 坏了

Question

我已经搜索了解决方案，但没有找到与我相同的问题...

我的页面上有不同的部分，它们漂浮在 View 之外，如果您单击菜单链接，每个部分都会漂浮在 View 中。

Owl Carousel 是一个额外的部分...现在的问题是，例如，当我在主页部分并调整窗口大小时。如果我然后让 slider 部分 float 到 View 中， Owl Carousel 就会全部损坏。如果我再次调整窗口大小，轮播将重新加载并且一切正常，但前提是我进行了额外的调整。

$(".menu-btn").click(function(event) {
  var target = $(this).attr('href');
  event.preventDefault();

  $(".sectionID").removeClass("active");
  $(target).addClass("active");


});

$("#owl-example").owlCarousel();

$(".slider").owlCarousel({
  navigation: true,
  pagination: true,
  slideSpeed: 1000,
  paginationSpeed: 500,
  paginationNumbers: true,
  singleItem: true,
  autoPlay: false,
  autoHeight: false,
  animateIn: 'slideIn',
  animateOut: 'slideOut',
  afterAction: syncPosition,
  responsiveRefreshRate: 200,
  booleanValue: false,
  afterMove: afterAction
});

.header {
  position: fixed;
  top: 0;
  left: 0;
}
.active {
  z-index: 2;
}
#menu-top {
  position: fixed;
  top: 0;
  z-index: 1000;
}
.sectionID {
  margin: 100px 0;
}
.sectionID:nth-child(odd) {
  transform: translateX(-5000px);
}
.sectionID:nth-child(even) {
  transform: translateX(5000px);
}
#section-wrapper {
  position: relative;
}
.sectionID {
  position: absolute;
  top: 0;
  transition: 1.5s;
  padding-bottom: 0;
  height: 100vh;
  background-color: white;
}
.sectionID.active {
  transform: translateX(0px);
  width: 100%;
  padding-bottom: 0;
  background-color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<div class="header">
  <ul>
    <li><a href="#1" class="menu-btn">Home</a>
    </li>
    <li><a href="#2" class="menu-btn">Slider</a>
    </li>
  </ul>
</div>
<section id="1" class="sectionID active">
  <div class="screen1">
    <h1 style="text-allign:center;">Home</h1>
  </div>
</section>

<section id="2" class="sectionID">
  <div class="slider">
    <div id="owl-example" 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>
  </div>
</section>

我添加了一个片段以便更好地理解我的部分是如何工作的。 我认为这是因为轮播没有刷新或再次加载，所以我试图找到一个解决方案，点击菜单按钮开始刷新 Owl Carousel ，但我不知道如何。似乎没有任何效果..

我使用了一个模板，它有一个较旧的 jquery 和 owl carousel 1，现在更新文件的工作量太大了。如果我只更新 jquery 和 Owl Carousel ，我认为该页面将无法正常工作。还是我错了？

好吧，回到我的问题:是否有可能在点击时刷新 Owl Carousel ？

在此先感谢您的帮助....

Answer 1

您可以通过这种方式手动触发 owl-carousel 方法:

$("#owl-example").trigger("refresh.owl.carousel");

其他方式是触发窗口调整大小事件(不推荐):

$(window).trigger("resize");

有关轮播事件的更多信息，请参阅 docs .

关于损坏的轮播的解释:

插件必须知道容器的宽度和元素的高度才能工作。当轮播被隐藏时，所有这些值都是零。因此，在显示隐藏的轮播后，需要触发 refresh 并强制 owl-carousel 重新计算值。

在某些情况下，您可以在轮播初始化期间将轮播的不透明度设置为opacity: .001，而不是将其隐藏并将不透明度设置回1。访问者不会看到它，owl-carousel 也不会损坏。

编辑

在您的情况下，最终代码将是:

var owlContainer = $("#owl-example");
owlContainer.owlCarousel();
$(".menu-btn").click(function(event) {
    event.preventDefault();
    var target = $( $(this).attr('href') );
    $(".sectionID").removeClass("active");
    target.addClass("active");
    target.find(".owl-carousel").trigger("refresh.owl.carousel");
});

请注意您的代码中的错误:

您在 .owl-carousel 及其容器元素 .slider 上初始化轮播。应该只有一个，猜猜 .owl-carousel。

编辑 2

对于 owl-carousel 版本 1，你可以这样重新初始化它:

target.find(".owl-carousel").data('owlCarousel').reinit();

reinit() method reinitialize plugin

Syntax: owldata.reinit(newOptions)

Yes! you can reinit plugin with new options. Old options will be overwritten if exist or added if new.

You can easly add new content by ajax or change old options with reinit method.

More about v1 content manipulations .