猫头鹰旋转木马断裂

Question

我已经寻找解决方案，但我没有发现与我相同的问题......

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

猫头鹰轮播是一个额外的部分...现在的问题是，例如，当我在主页部分并调整窗口大小时。如果我让滑块部分浮入视野，猫头鹰旋转木马就会全部损坏。如果我再次调整窗口大小，轮播会重新加载，一切正常，但前提是我进行了额外的调整。

$(".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>

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

我使用了一个模板，它有一个较旧的 jquery 和 owl carousel 1，现在更新文件的工作量太大了。如果我只是更新 jquery 和 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() 方法重新初始化插件

语法：owldata.reinit(newOptions)

是的！您可以使用新选项重新初始化插件。旧选项将是 如果存在则覆盖，如果新则添加。

您可以通过 ajax 轻松添加新内容或更改旧选项 重新初始化方法。

More about v1 content manipulations.