owl carousel来回重复使用多次的方法

本文介绍了一种在浏览器窗口大小变化时调整页面结构的方法,使用Owl Carousel插件实现响应式布局。当窗口宽度小于等于768px时,启用slider功能;大于768px时,关闭slider并恢复桌面版布局。文章提供了具体实现代码,并解决了在窗口大小变化时,第三次切换可能无法显示效果的问题。

想在调整浏览器大小的情况下调整页面结构,大于768不用slider,小于等于768就开启slider功能,切换的时候第三次就无法调出效果,网上找到了解决方法

https://github.com/OwlCarousel2/OwlCarousel2/issues/1861

var mission_html = $(".owl-carousel").html();
//
$( window ).resize(function() {
console.log('resizing window '+$( window ).width()) ;
if ($(window).width()<=768){
console.log('enable carousel...');
$('.owl-carousel').trigger('destroy.owl.carousel');
$(".owl-carousel").owlCarousel({
items: 1,
loop: true,
responsiveClass:true,
autoplay: true,
autoplayTimeout:5000,
autoplayHoverPause:true,
dots: true,
autoHeight: false
});
}else{
console.log("resume desktop version")
$(".owl-carousel").html(mission_html);
}
});

转载于:https://blog.51cto.com/brucetam/2286886

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值