猫头鹰旋转木马坏了

Question

我已经寻找了一个解决方案，但我没有发现一个问题相同的我…

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

猫头鹰旋转木马是一个额外的部分…现在的问题是，当我在home部分，例如，我调整了窗口的大小。如果我让滑块部分浮动到视图中，那么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>

我添加了一个片段，以便更好地理解我的部分是如何工作的。我认为这是因为旋转木马没有刷新或再次加载，所以我试图找到一个解决方案，在点击菜单按钮时，猫头鹰旋转木马的刷新开始了，但我不知道如何。

我使用了一个模板，它有一个较旧的jquery和owl carousel 1，现在更新文件会有太多的工作。我不认为这个页面将正常工作，如果我只是更新jquery和猫头鹰旋转木马。还是我错了?

好吧，回到我的问题:有没有可能刷新猫头鹰旋转木马点击?

提前感谢您的帮助....

Answer 1

您可以手动触发owl-carousel方法:

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

另一种方法是触发窗口大小调整事件(不推荐):

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

关于carousel事件的更多信息。

关于旋转木马损坏的解释:

插件必须知道容器的宽度和元素的高度才能工作。当旋转木马被隐藏时，所有这些值都为零。因此，在显示隐藏的旋转木马后，需要触发refresh，从而迫使owl-carousel重新计算值。

在某些情况下，您可以在carousel初始化期间将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上初始化carousel。应该只有一个，我猜是.owl-carousel。

编辑2

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

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

reinit() method reinitialize plugin

语法:owldata.reinit (newOptions)

是的!你可以用新的选项重新创建插件。旧的选项将是

您可以通过ajax轻松添加新内容或使用reinit方法。

关于v1内容操作的更多信息