Owl Carousel issue with Foundation 6

Question

Can you help me to resolve the JS conflict with Foundation 6.

This recipe — http://zurb.com/university/lessons/adding-on-to-a-great-foundation — did not help me.

I need to use Owl Carousel in Foundation.

How can I use the Javascript code below?

$(document).foundation();

jQuery(document).ready(function(){

}); 

Thanks.

Answer 1

there is no conflict.

in your HTML, you have to include the owl-carousel.js file after jquery.js.

in your app.js, put your calling code and use the ID of your owl-carousel wrapper. example:

$( document ).ready(function() {	

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

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

}

<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">
		<!-- rotating images -->
		<div id="owl-homepage" class="owl-carousel owl-theme" style="height: 100vh">

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

hope this helps :)