我想根据视口的宽度在旋转木马视图和不同的布局之间切换。设置转盘效果不错。当我想删除它时遇到了问题。
我使用$owlTeam.destroy();
,根据文档,它应该在转盘初始化之前重新创建标记的状态,但由于某种原因,它删除了两个意外的关键div。一个是包装器div,它是包含转盘的div的父级,另一个是转盘div本身。
这是我的标记:
<section id="some-id" class="team">
<div class="wrapper"> <!-- this gets removed on destroy -->
<header><!-- content --></header>
<div class="owlCarousel"> <!-- and this gets removed on destroy -->
<article class="big"><!-- content contains another .wrapper --></article>
<article class="big"><!-- content contains another .wrapper --></article>
<article class="small"><!-- content --></article>
<article class="small"><!-- content --></article>
<!-- and some more articles -->
</div>
</div>
</section>
这是我使用的JS:
var $owlTeam;
if( $window.width() < 680 ) {
$('.team .owlCarousel').owlCarousel({
autoPlay: false
, singleItem:true
, transitionStyle : "fade"
, pagination : true
});
$owlTeam = $('.team .owlCarousel').data('owlCarousel');
}
$window.resize(function() {
if( $window.width() < 680 ) {
$('.team .owlCarousel').owlCarousel({
autoPlay: false
, singleItem:true
, transitionStyle : "fade"
, pagination : true
});
$owlTeam = $('.team .owlCarousel').data('owlCarousel');
} else {
if( typeof $owlTeam != 'undefined' ) {
$owlTeam.destroy();
}
}
});
我尝试使用ID直接选择应该包含旋转木马的div,但这根本没有改变行为。我可以用JS重新插入丢失的标记,但这似乎更像是一个创可贴,而不是一个合适的解决方案。
造成这种行为的原因是什么?我该如何解决?
jQuery版本:1.11.1owl版本:1.3.2我测试的浏览器:FF 35,Chrome 40
这是一个已报告的错误:https://github.com/smashingboxes/OwlCarousel2/issues/460
不管怎样,你可以尝试摧毁猫头鹰旋转木马:
$('#your_carousel').trigger('destroy.owl.carousel').removeClass('owl-carousel owl-loaded');
$('#your_carousel').find('.owl-stage-outer').children().unwrap();