jquery conflict with foundation 5 and owl carousel 2

Question

I have really pathetic issue but I don't know why its happened. I am using owl carousel 2 with foundation 5 and its working fine on all browsers just giving me issue in safari browser.

Here is my file structure:

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

when I remove app.js carousel start working on safari but when it's on carousel stop slides. Here my code in app.js.

jQuery(function(){
  jQuery.noConflict();
  jQuery(document).foundation();
});

And this one in 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...
})();

score 2 · Answer 1 · answered Sep 10 '15 at 08:38

I found solution myself. Actually foundation also using.

    jQuery(document).foundation();

And I was also using

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

so both function was working fine on other browsers but on safari its giving confliction thats why it was not working so i just remove .ready function from theme.js and its solved. maybe it will help with someone else

jquery conflict with foundation 5 and owl carousel 2

1 Answers1