CODEWITHSUNDEEP
javascriptjquerycssresponsive-designowl-carousel
novellino
novellino

Reputation: 1069

Owl Carousel 2 not working on resize window

I am using Owl carousel 2 in my page and I want to have the Stage padding option like here: http://www.owlcarousel.owlgraphic.com/demos/stagepadding.html

Here is my HTML:

 <div class="owl-carousel">
   <div class="item"></div>
   <div class="item"></div>
   <div class="item"></div>
   <div class="item"></div>
 </div>

my css:

 .item {
   background-image: url("myimage.png");
   background-repeat: no-repeat;
   background-size: contain;
   height: 10rem;
 }

and my js:

 var owloptions = {
    stagePadding: 50,
    loop:true,
    margin:10,
    nav: true,
    dots: false,
    responsive:{
        0:{
            items:2
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
}

$('.owl-carousel').owlCarousel(owloptions);

My problem is that responsive is not working. It works only on reload the page, but not while resizing. And I am wondering if something is wrong on the css or on js? Thanks in advance

Upvotes: 1

Views: 2118

Answers (2)

Taytorious
Taytorious

Reputation: 324

What you have should work fine, but owl carousel debounces the window resize. So, if you are testing by resizing your browser window, make sure you stop long enough for the carousel to readjust. If that doesn't do it, I'd set the responsiveBaseElement and see if that makes a difference. More here.

Upvotes: 0

Yagnik Detroja
Yagnik Detroja

Reputation: 929

       responsive: {
              0: {
                items: 1,
                nav: true
              },
              600: {
                items: 3,
                nav: false
              },
              1000: {
                items: 5,
                nav: true,
                loop: false,
                margin: 20
              }
            }

Try this on document ready 

 $(document).ready(function() {
          $('.owl-carousel').owlCarousel({

Upvotes: 0

Related Questions