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.

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

  • 1
    working very well... – aravind Nov 18 '17 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 '17 at 12:20
  • i have edited my answer – Ranganathan Nov 20 '17 at 3:59
  • i am currently using magento 1.9 is it ok to enqeue css and js file in local.xml – Muhammad Qureshi Nov 21 '17 at 7:14
  • yes....u should use local.xml only to enqueue css and js file – Ranganathan Nov 21 '17 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, privacy policy and cookie policy

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