javascript - jquery 与 Foundation 5 和 owl carousel 2 冲突

Question

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

这是我的文件结构:

<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 时，轮播开始在 safari 上工作，但当它在轮播上时，就会停止幻灯片。 这是我在 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...
})();

Answer 1

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

    jQuery(document).foundation();

我也在用

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

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