Chouette numéro carrousel avec la Fondation 6

Question

Pouvez-vous me aider à résoudre le conflit avec la Fondation JS 6.

Cette recette - http://zurb.com/university/lessons/adding-on-to-a-great-foundation - ne m'a pas aidé.

Je dois utiliser Owl Carousel dans Foundation.

Comment puis-je utiliser le code Javascript ci-dessous?

$(document).foundation(); 
 

 
jQuery(document).ready(function(){ 
 

 
});

Merci.

Answer 1

Il n'y a pas de conflit.

Dans votre code HTML, vous devez inclure le fichier owl-carousel.js après jquery.js.

dans votre app.js, saisissez votre code d'appel et utilisez l'ID de votre wrapper carrousel hibou. exemple:

$(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>

espérons que cette aide :)