欢迎光临一流素材网,免积分免费素材下载!
当前位置:首页 > 教程 > 网站开发

jquery轮播插件owl.carousel.js调用图片内容改为两行或多行的方法

所属栏目:网站开发更新时间:2020-03-26 来源:cms大学 原作者:不详 发布:deepdfhy浏览:0

免费开源可商用的PHP万能建站程序-DiYunCMS(帝云CMS)

owl.carousel.js是一个非常优秀的幻灯轮播插件,很多朋友在使用时发现只能调用一行内容,大家都在寻求改为两行或多行的解决办法,但似乎现在并没有合适的答案。CMS大学小编也遇到了这个问题,在搜索无果后,决定自己动手处理。下面给出解决办法。

这里我们以改为两行为例。原来的效果是这样子,只能显示一排。

修改前的样子.jpg

通过查看元素分析,我们发现它的父容器,杨世名为owl-wrapper,它的长度为所有li的总和

查看父容器.jpg

知道了它的计算方式,可以推断,我们如果需要改为两行,把此处改为总和的一半就可以了,我们来查看插件的js代码。

通过排查,在第277行,我们找到了这个函数。

函数.jpg

此处 t 等于 子元素li的数量 × 子元素宽度,也就是所有子级宽度总和的两倍,这里我们要取一半,也就是除以二。

修改为下面的代码:

折叠JavaScript 代码

appendWrapperSizes: function () {  
    var e = this;  
    var t = 0;  
    var t = e.$owlItems.length * e.itemWidth;  
    e.$owlWrapper.css({  
        width: t * 2,  
        left: 0  
    });  
    e.appendItemsSizes()  
},


这样我们的幻灯就变为两行了。但还没有完,我们发现在点击左右滑动时,右侧会出现大面积的空白,原因是:幻灯改为了两行,显示长度只有原来的一半,而向右滑动的检测函数依然以所有子级元素的总长为依据,达到总长后切换到最前,我们接着往下看

定义容器总长的函数.jpg

其中e.itemsAmount是子元素总数,e.options.items是当前屏幕上显示的元素总数,两者相减,也就是当前还未显示出来(屏幕之外)的元素总数。我们简单修改,就可以改为正确的数值了,代码如下:

折叠JavaScript 代码
max: function () {  
    var e = this;  
    var t = (e.itemsAmount * e.itemWidth - e.options.items * e.itemWidth) * -1;  
    if (e.options.items > e.itemsAmount) {  
        e.maximumItem = 0;  
        t = 0;  
        e.maximumPixels = 0  
    } else {  
        e.maximumItem = e.itemsAmount/2 - e.options.items;  
        e.maximumPixels = t/2  
    }  
    return t  
},

修改完以后,我们来看看效果:

最终效果.jpg

非常完美。我们还可以根据上面的思路把owl.carousel.js幻灯片改成三行、四行或者更多行。


收藏 0 有帮助 0 没帮助 0 打赏 0
给个评价吧