0

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.

5
  • Can i get your screenshot of errors in console Nov 18, 2017 at 11:13
  • And enqueue your css and js files using local.xml ,,this is proper way Nov 18, 2017 at 11:14
  • its showing type error owl.carousel is not a function error Nov 21, 2017 at 7:15
  • its not even working on local Nov 21, 2017 at 7:16
  • i've just created a new file linked only css and js file and owl carousel code its still not working Nov 21, 2017 at 7:17

2 Answers 2

1

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.

5
  • 1
    working very well...
    – aravind
    Nov 18, 2017 at 11:36
  • semicolon is optional if code after the supposed semicolon is in the new line and unless it is minified. Minification requires semicolon. You should ask the console error from the browser browser before saying that it is due to the semicolon.
    – Ner
    Nov 18, 2017 at 12:20
  • i have edited my answer Nov 20, 2017 at 3:59
  • i am currently using magento 1.9 is it ok to enqeue css and js file in local.xml Nov 21, 2017 at 7:14
  • yes....u should use local.xml only to enqueue css and js file Nov 21, 2017 at 7:28
0

Same thing happened to me in slider when I used owl carousel. I use a setTimeout function to load the code after some interval. Like this I had used in my file:

    setTimeout(function(){
        jQuery(".products-related .owl-carousel").owlCarousel({
            loop:true,
            margin:10,
            responsiveClass:true,
            responsive:{
                0:{
                    items:2,
                    nav:false,
                    loop: false
                },
                600:{
                    items:2,
                    nav:true
                },
                1000:{
                    items:3,
                    nav:true,
                    loop:false,
                    dots: false
                }
            }
        });
    }, 12000);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.