owl.carousel.js是一个非常优秀的幻灯轮播插件,很多朋友在使用时发现只能调用一行内容,大家都在寻求改为两行或多行的解决办法,但似乎现在并没有合适的答案。CMS大学小编也遇到了这个问题,在搜索无果后,决定自己动手处理。下面给出解决办法。
这里我们以改为两行为例。原来的效果是这样子,只能显示一排。
通过查看元素分析,我们发现它的父容器,杨世名为owl-wrapper,它的长度为所有li的总和
知道了它的计算方式,可以推断,我们如果需要改为两行,把此处改为总和的一半就可以了,我们来查看插件的js代码。
通过排查,在第277行,我们找到了这个函数。
此处 t 等于 子元素li的数量 × 子元素宽度,也就是所有子级宽度总和的两倍,这里我们要取一半,也就是除以二。
修改为下面的代码:
这样我们的幻灯就变为两行了。但还没有完,我们发现在点击左右滑动时,右侧会出现大面积的空白,原因是:幻灯改为了两行,显示长度只有原来的一半,而向右滑动的检测函数依然以所有子级元素的总长为依据,达到总长后切换到最前,我们接着往下看
其中e.itemsAmount是子元素总数,e.options.items是当前屏幕上显示的元素总数,两者相减,也就是当前还未显示出来(屏幕之外)的元素总数。我们简单修改,就可以改为正确的数值了,代码如下:
修改完以后,我们来看看效果:
非常完美。我们还可以根据上面的思路把owl.carousel.js幻灯片改成三行、四行或者更多行。
为帝国CMS用户提供动力
Copyright © 2016 CmsDX.com All Rights Reserved.