Magento – Magento 1.9.2.4 : Owl carousel not working

conflictjquerymagento-1.9slider

I want to add an owl carousel to my homepage (as a banner slider and product slider) I have linked every file everything is working fine except owl carousel even I have tried to use a slick slider instead of it but its also not working
here is my linked files:

<link rel="stylesheet" href="<?php echo $this->getSkinUrl(); ?>css/bootstrap.css" />
<link rel="stylesheet" href="<?php echo $this->getSkinUrl(); ?>css/owl.carousel.min.css" />
<link rel="stylesheet" href="<?php echo $this->getSkinUrl(); ?>css/owl.theme.default.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous" />
<script type="text/javascript" src="<?php echo $this->getSkinUrl(); ?>js/owl.carousel.min.js"></script>
<script type="text/javascript" src="<?php echo $this->getSkinUrl(); ?>js/bootstrap.js"></script>

and javascript code for owl carousel:

$(document).ready(function(){
$('#slider').owlCarousel({
    loop:true,
    margin:0,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:1
        },
        1000:{
            items:1
        }
    }
})
})

I have even tried jQuery.noConflict() but it's not working tried commenting other jquery code but still not working.

Best Answer

Proper way to work with owl-Carousel

To your Enqueue your css and js files

app\design\frontend\vendor\theme\layout - local.xml

    <action method="addItem"><type>skin_css</type><name>css/css/owl.carousel.min.css</name></action>
    <action method="addItem"><type>skin_css</type><name>css/owl.theme.default.css</name></action>
    <action method="addItem"><type>skin_js</type><name>js/owl.carousel.min.js</name></action>

Add Carousal function in your custom js

$(document).ready(function(){
$('.owl-carousel').owlCarousel({
    loop:true,
    margin:0,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:1
        },
        1000:{
            items:1
        }
    }
});
});

And your html should be

<div class="owl-carousel" id="owl-carousel">
   <div class="item"> Content 1</div>
   <div class="item"> Content 1</div>
   <div class="item"> Content 1</div>
</div>

Hope this will work for you.

Related Topic