0

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!

Andra Vilcu
  • 13
  • 1
  • 7
  • Please refer This Stackoverflow question http://stackoverflow.com/questions/28070885/owl-carousel-not-working-maybe-i-linked-something-incorrectly/37088540#37088540 – Arshad M May 07 '16 at 12:30

1 Answers1

1

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,
    }
  }
 })
Norayr Baghdasarov
  • 395
  • 5
  • 10