猫头鹰旋转木马断裂
我已经找到了解决办法，但我没有发现和我的问题一样的问题.
我的页面上有不同的部分，它们是浮动的外部视图，如果单击菜单链接，每个部分都会浮动到视图中。
猫头鹰旋转木马现在是一个额外的section...The问题是，当我在家庭部分，例如，我调整窗口的大小。如果我让滑块部分浮到视野中，猫头鹰旋转木马就都坏了。如果我再次调整窗口的大小，旋转木马就会重新加载，一切都正常，但前提是我需要额外调整大小。
$(".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旋转木马1，现在要更新这些文件要做的工作太多了。我认为如果我只是更新jquery和owl旋转木马，页面就不能正常工作。还是我错了？
那么，回到我的问题:是否有可能刷新猫头鹰旋转木马点击？
谢谢您的帮助.
回答 1
Stack Overflow用户
发布于 2016-08-29 09:12:21
您可以通过这种方式手动触发owl-carousel方法：
$("#owl-example").trigger("refresh.owl.carousel");其他方法是触发窗口调整大小事件(不建议)：
$(window).trigger("resize");更多关于文档中旋转木马事件的信息。
关于破碎旋转木马的解释：
插件必须知道容器的宽度和元素的高度才能工作。当旋转木马被隐藏时，所有这些值都为零。因此，在显示隐藏的旋转木马后，需要触发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轻松地添加新内容，也可以使用reinit方法更改旧选项。
关于v1内容操作的更多信息。
https://stackoverflow.com/questions/39202181
复制相似问题
腾讯云开发者
