Question

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

我的页面上有不同的部分，这些部分是浮动的外部视图，如果单击菜单链接，每个部分都会浮动进入视图。

猫头鹰旋转木马是一个额外的部分...现在的问题是，当我在家庭部分，例如我调整窗口大小。如果我然后让滑块部分浮动进入视图，那么猫头鹰旋转木马就会被打破。如果我再次调整窗口大小，则会重新加载轮播并且一切正常，但只有在我执行此操作时才会调整大小。

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

我使用了一个模板，它有一个较旧的jquery和一个owl carousel 1，现在更新文件的工作量太大了。如果我只是更新jquery和猫头鹰旋转木马，我认为页面无法正常工作。或者我错了吗？

好吧，回到我的问题：是否有可能在点击时刷新猫头鹰旋转木马？

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

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

猫头鹰旋转木马打破

1 个答案: