首页 > 代码库 > owlCarousel 用法心得1 -20170405
owlCarousel 用法心得1 -20170405
1、触发事件
var owl1=$(‘.inews_list‘);
owl1.owlCarousel({
‘items‘:3,
‘stopOnHover‘:false,
‘pagination‘:false,
‘autoPlay‘:true
});
$(‘.icont4 .prev‘).click(function(event) {
owl1.trigger(‘owl.prev‘);
});
$(‘.icont4 .next‘).click(function(event) {
owl1.trigger(‘owl.next‘);
});
2、滚动子元素的宽度留白问题
由于插件会自动设置每个item的宽度,所以我们可以反过来计算出我们所需要的外框的宽度,再由外外层用overflow:hidden遮盖住即可
在1200的环境下
公式1:算出空白区域的宽度:1200-3*(li.width)=2*(空白.width)
公式2:算出定义层(插件会根据定义层的宽度--第一屏的总宽,来计算第一屏每个item的宽度):定义层宽度=3*(li.width)+3*(空白.width)
每个li的宽度为350,使用区域为1200,
(1200-3*350)/2=75 -单个空白区域
3*350+3*75=1275 --定义层宽度
定义层的宽度算出为1275
owlCarousel 用法心得1 -20170405
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。