猫头鹰轮播 [英] Owl carousel breaks

问题描述

我搜索了一个解决方案，但我没有发现一个问题与我的...

我的页面上有不同的部分，

猫头鹰转盘是一个额外的部分...现在的问题是，当我我在主页上的例子和我调整窗口大小。如果我然后让滑块部分浮动进入视图，猫头鹰旋转木马都破了。如果我重新调整窗口大小，重新加载轮播，一切正常，但只有当我这样做额外调整大小。

  .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 ）;}＃section-wrapper {position：relative;}。sectionID {position：absolute; top：0;过渡：1.5s; padding-bottom：0;高度：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 =＃1class =menu-btn>首页< / a> < / li> < li>< a href =＃2class =menu-btn>滑块< / a> < / li> < / ul>< / div>< section id =1class =sectionID active> < div class =screen1> < h1 style =text-allign：center;>首页< / h1> < / div>< / section>< section id =2class =sectionID> < div class =slider> < div id =owl-exampleclass =owl-carousel> < div>您的内容< / div> < div>您的内容< / div> < div>您的内容< / div> < div>您的内容< / div> < div>您的内容< / div> < div>您的内容< / div> < div>您的内容< / div> < / div> < / div>< / section>  

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

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

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

感谢您提供任何帮助....

解决方案

您可以触发 carousel 方法：

  $（＃owl-example refresh.owl.carousel）; 
  

其他方式是触发窗口调整大小事件（不推荐）：

  $（window）.trigger（resize）; 
  

有关carousel活动的更多信息，请访问 docs 。

有关损坏的轮播的说明 p>

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

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

/ strong>

在您的情况下，最终代码为：

  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 。

EDIT 2 / p>

对于 owl-carousel 版本 1 ，可以通过这种方式重新初始化：

  target.find（。owl-carousel）。data（'owlCarousel'）reinit 
  

reinit（）方法重新初始化插件

语法：owldata.reinit（newOptions）

是的！你可以重新插入新的选项插件。

您可以通过ajax轻松添加新内容，或使用
reinit方法更改旧选项。

更多关于v1内容操作。

I have searched for a solution, but I haven't found a problem same as mine...

I have different sections on my page, which are floating outside view, each section floats into view if you click on the menu-link.

The owl carousel is one extra section...The problem now is, that when I am on the home-section for example and I resize the window. If I then let the the slider-section float into view, the owl-carousel is all broken. If I then resize the window again, the carousel is reloaded and everything works fine, but only if I do this extra resize.

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

I added a snippet for better understanding, how my sections work. I think it is because the carousel is not refreshed or loaded again, so I tried to find a solution, that on click the menu-buttons the refresh of the owl carousel is started, but I don't know how. Nothing seems to work..

I used a template, which has an older jquery and the owl carousel 1, and now it would be too much work to update the files. I don't think the page would work properly if I just updatet jquery and the owl carousel. Or am I wrong?

Well, back to my question: Is there a possibility to refresh owl carousel on click?

Thanks in advance for any help....

解决方案

You can trigger the owl-carousel methods manually this way:

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

Other way would be to trigger window resize event (not recommended):

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

More about carousel events in docs.

Explanation about broken carousel:

The plugin has to know the container width and elements height in order to work. While the carousel is hidden, all of those values are zero. Therefore, after showing hidden carousel one need to trigger refresh and that way force owl-carousel to recalculate values.

In some cases, you can set the opacity of carousel to opacity: .001 during the carousel initialization, than hide it and set opacity back to 1. Visitors won't see it and the owl-carousel won't be broken.

EDIT

In your case, the final code would be:

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

Please note the error in your code:

You init the carousel on .owl-carousel and on its container elements .slider. There should be only one, guess .owl-carousel.

EDIT 2

For owl-carousel version 1, you can re-init it this way:

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.

这篇关于猫头鹰轮播的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！