jquery与foundation 5和owl carousel 2冲突答案

【问题标题】：jquery conflict with foundation 5 and owl carousel 2jquery与foundation 5和owl carousel 2冲突
【发布时间】：2015-09-12 20:41:43
【问题描述】：

我有一个非常可悲的问题，但我不知道它为什么会发生。我正在使用 owl carousel 2 和基础 5，它在所有浏览器上都可以正常工作，只是在 safari browser 中给我带来了问题。

这是我的文件结构：

<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/foundation/js/foundation.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/theme.js"></script>
<script type="text/javascript" src="js/owl.carousel.min.js"></script>
</body>
</html>

当我删除 app.js carousel 时开始在 safari 上工作，但是当它在 carousel 上时停止幻灯片。这是我在app.js 中的代码。

jQuery(function(){
  jQuery.noConflict();
  jQuery(document).foundation();
});

还有这个在theme.js中

jQuery(function(){
	"use strict";
	jQuery.noConflict();
	jQuery(document).ready(function(){
		//parallax
		
		//carousel
		jQuery('.owl-carousel').each(function(){
			
			//var tot = jQuery(this).find("div.item").length;
			var owl = jQuery('.owl-carousel');
		    	
				jQuery(".prev").on('click', function () {
			
				    //owl.trigger('prev.owl.carousel');
				    owl.trigger('prev.owl.carousel');
				});

				jQuery(".next").on('click', function () {
			
				    owl.trigger('next.owl.carousel');
				    //var toIndex = 5;
				    //owl.trigger("to.owl.carousel", 5);
				    //owl.trigger('to.owl.carousel', jQuery(this).index());
				});
				
		    if( jQuery(this).find("div.item").length > 5){

		   		jQuery(this).owlCarousel({
		   			items: 4,
				    loop: true,
				    autoplay:true,
				    autoplayTimeout:3000,
		    		autoplayHoverPause:true,
		      		margin: 0,
		      		responsiveClass:true,
		      		dots:false,
		      		//autoWidth:true,
				    responsive:{
			        0:{
			            items:1,
			            nav:false
			        },
			        600:{
			            items:2,
			            nav:false
			        },
			        1000:{
			            items:4,
			            nav:false,
			        }
			    	}
		   		});
		   		
		   	}else{
				
		   		jQuery(this).owlCarousel({
				    loop: false,
				    autoplay:true,
				    autoplayTimeout:3000,
		    		autoplayHoverPause:true,
		      		margin: 0,
		      		responsiveClass:true,
		      		scrollPerPage : true,
		      		dots:false,
		      		//autoWidth:true,
				    responsive:{
			        0:{
			            items:1,
			            nav:false
			        },
			        600:{
			            items:3,
			            nav:false
			        },
			        1000:{
			            items:4,
			            nav:false,
			        }
			    	}
		   		});
		   	}
		});
	
	});
  // Define your library strictly...
})();

【问题讨论】：

标签： javascript jquery zurb-foundation-5 conflicting-libraries

【解决方案1】：

我自己找到了解决方案。其实粉底也在用。

    jQuery(document).foundation();

我也在用

jQuery(document).ready(function(){
});

所以这两个功能在其他浏览器上都可以正常工作，但在 safari 上它会产生冲突，这就是它无法正常工作的原因，所以我只是从 theme.js 中删除了 .ready 函数并解决了它。也许它会帮助别人

【讨论】：