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

时间: 2024-07-28 14:07:35

owlCarousel 用法心得1 -20170405的相关文章

关于ActionContext.getContext()的用法心得

转: 为了避免与Servlet API耦合在一起,方便Action类做单元测试,Struts 2对HttpServletRequest.HttpSession和ServletContext进行了封装,构造了三个Map对象来替代这三种对象,在Action中,直接使用HttpServletRequest.HttpSession和ServletContext对应的Map对象来保存和读取数据. (一)通过ActionContext来获取request.session和application对象的Logi

Actioncontext跟ServletActionContext的区别---未完待续

//public class BaseAction extends ActionSupport{ public static HttpServletRequest getRequest(){ return ServletActionContext.getRequest(); } public static HttpServletResponse getResponse(){ return ServletActionContext.getResponse(); } public static Ht

Logstash+Elasticsearch+Kibana 联合使用搭建日志分析系统(Windows系统)

最近在做日志分析这块儿,要使用 Logstash+Elasticsearch+Kibana 实现日志的导入.过滤及可视化管理,官方文档写的不够详细,网上的文章大多要么是针对Linux系统的用法,要么就是抄袭别人的配置大都没法运行.费了很大劲才搞定了这仨东西,写一篇用法心得,废话不多说,进入主题. 首先,你的电脑上要装Java 的JDK环境,要使用  Logstash+Elasticsearch+Kibana,需要下载这三个软件和一些必要的插件,列表如下 : 1.Java JDK (最新版Logs

SQL Server数据库partition by 与ROW_NUMBER()函数使用详解[转]

关于SQL的partition by 字段的一些用法心得 先看例子: if object_id('TESTDB') is not null drop table TESTDB create table TESTDB(A varchar(8), B varchar(8)) insert into TESTDB select 'A1', 'B1' union all select 'A1', 'B2' union all select 'A1', 'B3' union all select 'A2'

Android学习心得(9) --- ndk-build脚本参数用法

我在博客上发表一些我的Android学习心得,希望对大家能有帮助. 在前一章我们学习了如何学习基本的dex2jar和jd-gui使用. 这一章学习基本的ndk-build脚本参数用法. 编译具体参数使用: ndk-build : 编译 ndk-build -C <project路径> : 先cd进入<project路径>,然后执行ndk-build. ndk-build -B : 在构建系统的时候不会重构建目标,通过 -B 参数来实现强制重构所有源代码 ndk-build clea

C++用法的学习心得

c++这门课,在我刚进入大学的就已经开始接触了.因为自己的专业就是计算机科学,因此c++嘛,对于我来说还是比较重要的.不同于其他专业,一开始我接触就是c++了,跳过了c语言一类的课.就我自己认为,c++这课学起来还是很有难度的.大一上课的时候,老师就说过这课在生活中的应用很广泛.处于初学者的我,开始给我的感觉就是很是乏味枯燥,提不起兴趣.不过仔细想想自己的专业就是和它有关,就算将来自己不从事这个行业,还是很有学习它的必要.因为多一门技术总归是不会吃亏的. 作为男生嘛,自己没有少玩游戏.很多人玩游

蓝懿iOS培训日志2 复习NSString基本用法及练习心得 刘国斌老师

今天是自习,前几天微信打飞机的游戏在老师的带领下做了一遍,今天又回顾了一遍,然后自己尝试性的做了一个简化的AngryBird,在做的过程中发现了一些小问题,有时候容易马虎,少了一行代码,一个return 或者一个初始化 却要花好久才能检查出来,实在是不应该,以后马虎一次,就把错的地方打上备注并且在心里默默的背十遍,以后还错还这样,我觉得应该很有效的避免重蹈覆辙吧.最近还是觉得能力有限,很多想法都不能实现或者实现起来很麻烦,这也将成为我学习的动力,希望以后看到现在的日志可以会心一笑,心里默默地告诉

关于C++用法的学习心得

通过大一一学期对C++语言的学习,我感觉c++是一门有一定难度并且很有挑战性的科目,在c++学习过程中,我们懂得了其有很多的用法. 引用是C++引入的新语言特性,是C++常用的一个重要内容之一,正确.灵活地使用引用,可以使程序简洁.高效. 引用简介 引用就是某一变量(目标)的一个别名,对引用的操作与对变量直接操作完全一样. 引用的声明方法:类型标识符 &引用名=目标变量名: [例]:int a; int &ra=a; //定义引用ra,它是变量a的引用,即别名 说明: (1)&在此

小小心得:go的匹配多行字符串、channel的range用法和close的用法

go正则匹配多行字符串的一个正则式 (?s)\d+\)\s.*?\n\s*\n ` 1) 初始化页面元素未达到要求 - Expected false - Failed: No 2) 初始化页面元 - Failed: No element found 3) 初始页e多行本框好 - Expected fa - Failed: No element found using locator: By( ` channel的range使用注意事项 cha := make(chan int,10) for d