jquery滚屏软件owl.carousel.js启用照片內容改成二行

日期:2020-12-18 类型:科技新闻 

关键词:在线网页制作,建网页,个人简介网页制作,简单网页,建立网页

隶属频道:网站建设升级 著作人:不祥 公布:deepdfhy访问:0次

owl.carousel.js是一个十分出色的幻灯片图片滚屏软件,许多朋友在应用时发觉只有启用一内行人容,大伙儿都会寻找改成二行或几行的处理方法,但好像如今并沒有适合的回答。CMS高校网编也碰到了这一难题,在检索未果后,决策自身动手能力解决。下边得出处理方法。

这儿大家以改成二行为例子。原先的实际效果是那样子,只有显示信息一排。

修改前的样子.jpg

根据查询原素剖析,大家发觉它的父器皿,杨世名叫owl-wrapper,它的长短为全部li的总数

查看父容器.jpg

了解了它的测算方法,能够推论,大家假如必须改成二行,把这里改成总数的一半便可以了,大家来查询软件的js编码。

根据清查,在第二77行,大家寻找了这一涵数。

函数.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幻灯片图片片改为三行、四行或是大量行。