貓頭鷹旋轉木馬問題與基金會6

Question

你能幫我解決與基金會6

這個配方的JS衝突 - http://zurb.com/university/lessons/adding-on-to-a-great-foundation - 我沒有幫助。

我需要在基金會中使用貓頭鷹傳送帶。

如何使用下面的JavaScript代碼？

$(document).foundation(); 
 

 
jQuery(document).ready(function(){ 
 

 
});

感謝。

Answer 1

沒有衝突。

在您的HTML中，您必須在jquery.js之後包含owl-carousel.js文件。

在您的app.js中，放入您的調用代碼並使用您的貓頭鷹傳送帶包裝的ID。例如：

$(document).ready(function() { \t 
 

 
\t // homepage slider 
 
\t \t $("#owl-homepage").owlCarousel({ 
 

 
\t \t navigation : false, // Show next and prev buttons 
 
\t \t slideSpeed : 300, 
 
\t \t paginationSpeed : 400, 
 
\t \t singleItem:true, 
 
\t \t transitionStyle : "backSlide", 
 
\t \t autoPlay: true 
 
\t \t }); 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<script src="https://cdn.jsdelivr.net/jquery.owlcarousel/1.31/owl.carousel.min.js"></script> 
 

 
<div class="row expanded"> 
 
\t \t <!-- rotating images --> 
 
\t \t <div id="owl-homepage" class="owl-carousel owl-theme" style="height: 100vh"> 
 

 
\t \t <div class="item" style="background-image: url('img/7.png'); min-height: 80vh; background-position: center center;"></div> 
 
\t \t <div class="item" style="background-image: url('img/6.png'); min-height: 80vh; background-position: center center;"></div> 
 
\t \t <div class="item" style="background-image: url('img/1.png'); min-height: 80vh; background-position: center center;"></div> 
 
\t \t <div class="item" style="background-image: url('img/2.png'); min-height: 80vh; background-position: center center;"></div> 
 
\t \t <div class="item" style="background-image: url('img/3.png'); min-height: 80vh; background-position: center center;"></div> 
 
\t \t <div class="item" style="background-image: url('img/4.png'); min-height: 80vh; background-position: center center;"></div> 
 
\t \t <div class="item" style="background-image: url('img/5.png'); min-height: 80vh; background-position: center center;"></div> 
 
\t \t 
 
\t \t </div> 
 
\t </div>

希望這有助於:)