zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    哈希表,开放地址法之线性探测代码(JAVA)
    Java中几个关键字的意思
    java学习——File类操作
    Map三种遍历方法
    Spring Data Binding
    哈希表的基础理解
    选择排序
    map集合使用
    排序
    关于LinkedList
  • 原文地址:https://www.cnblogs.com/ghfjj/p/6669095.html
Copyright © 2011-2022 走看看