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