CODEWITHSUNDEEP
responsive-designowl-carousel
Andra Vilcu
Andra Vilcu

Reputation: 13

owl-carousel slider not working responsively

I have set up the owl-carousel slider and it works perfectly fine in jsbin http://jsbin.com/zivahewise/2/edit?html,css,output

responsive and all that. However, when I implement it on Boostrap 3, the responsive feature isn't working. Anyone knows why?

Thanks!

Upvotes: 0

Views: 6181

Answers (1)

Norayr Baghdasarov
Norayr Baghdasarov

Reputation: 425

Maybe you use bootstrap class container. You can remove for ex. <div class='container'> and use CSS manually . I think all will work fine. ;)

Example right code HTML:

<div class="owl-carousel owl-theme">
   <div> Your Content </div>
   <div> Your Content </div>
   <div> Your Content </div>
   <div> Your Content </div>
   <div> Your Content </div>
   <div> Your Content </div>
  <div> Your Content </div>
</div>

Javascript:

  $('.owl-carousel').owlCarousel({
    loop:true,
    nav:true, 
    margin:10, 
    responsiveClass:true,            
    responsive:{
      0:{
         items:1 
      },
      480:{
         items:2, // from 480 to 677 
        nav:false 
      },

     678:{
        items:4, 
        center:true 
     },

     960:{
        items:5, 
        margin:20,
       center:false 
    },

    1200:{
       items:6,
       loop:false,
       margin: 30,
    }
  }
 })

Upvotes: 1

Related Questions