1

私は本当に哀れな問題を抱えていますが、なぜそれが起こったのかわかりません。私はフクロウカルーセル2をファウンデーション5で使用しており、すべてのブラウザで正常に動作しており、サファリブラウザで問題が発生しています。

これが私のファイル構造です：

<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とサファリで作業が開始されますが、カルーセルではスライドが停止します。ここに私のコードがあり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...
})();

4

1 に答える 1

2

私は自分で解決策を見つけました。実際にファンデーションも使っています。

    jQuery(document).foundation();

そして私も使っていました

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

したがって、両方の機能は他のブラウザでは正常に機能していましたが、サファリでは競合が発生したため、機能していなかったので、theme.js から .ready 関数を削除して解決しました。多分それは他の誰かに役立つでしょう

于 2015-09-10T08:38:54.023 に答える