貓頭鷹傳送帶下一張幻燈片視圖

Question

我使用貓頭鷹傳送帶2.0作爲全屏滑塊。這裏的例子：http://pixelbypixel.comli.com/

它的工作很好，除了一個細節：如果用戶調整屏幕使它更大，那麼下一個幻燈片/圖像的一部分，顯示了幾秒鐘：

有什麼辦法我可以修好它？ 例如，這個問題不會發生在這個滑塊上：http://archive.nicinabox.com/superslides/#1但我需要在這種情況下使用貓頭鷹傳送帶。

這是我的標記：

<div class="owl-carousel-container"> 
    <div class="owl-carousel"> 
     <div> 
     <div class="img-container" style="background:url('img/home-1.jpg') no-repeat center center;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;"></div> 
     </div> 
     <div> 
     <div class="img-container" style="background:url('img/home-2.jpg') no-repeat center center;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;"></div> 
     </div> 
     <div> 
     <div class="img-container" style="background:url('img/home-3.jpg') no-repeat center center;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;"></div> 
     </div> 
    </div> 
</div> 

CSS：

.owl-carousel-container { 
    position: relative; 
    width: 100%; 
    height: 100% !important; 
    background: #00ad9d; 
} 
.owl-carousel-container .owl-carousel { 
    height: 100% !important; 
    opacity: 0 !important; 
    -webkit-transition: all 0.1s; 
    -moz-transition: all 0.1s; 
    transition: all 0.1s; 
} 
.owl-carousel-container .owl-carousel .owl-stage-outer { 
    height: 100% !important; 
} 
.owl-carousel-container .owl-carousel .owl-stage-outer .owl-stage { 
    height: 100% !important; 
} 
.owl-carousel-container .owl-carousel .owl-stage-outer .owl-stage .owl-item { 
    height: 100% !important; 
} 
.owl-carousel-container .owl-carousel .owl-stage-outer .owl-stage .owl-item > div { 
    width: 100%; 
    height: 100%; 
} 
.owl-carousel-container .owl-carousel .owl-stage-outer .owl-stage .owl-item .container { 
    height: 100%; 
    position: relative; 
    -webkit-transition: all 0.3s; 
    -moz-transition: all 0.3s; 
    transition: all 0.3s; 
} 
.owl-carousel-container .owl-carousel .owl-stage-outer .owl-stage .owl-item .container img { 
    width: auto; 
    position: absolute; 
    right: 15px; 
    /*top: 157px;*/ 
    height: 384px; 
    top: 50%; 
    margin-top: -177px; 
} 
.owl-carousel-container .owl-carousel .owl-stage-outer .owl-stage .owl-item div.img-container { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
} 

JS：

function owlCarousel(){ 

    var owl = $('.owl-carousel'); 

    $(".owl-carousel").owlCarousel({ 
    loop:true, 
    nav:false, 
    mouseDrag:true, 
    touchDrag:false, 
    autoplay:true, 
    autoplayTimeout:6000, 
    autoplaySpeed:600, 
    autoplayHoverPause:false, 
    onInitialize : function(element){ 
     owl.children().sort(function(){ 
      return Math.round(Math.random()) - 0.5; 
     }).each(function(){ 
      $(this).appendTo(owl); 
     }); 
    }, 
    responsive:{ 
     0:{ 
      items:1 
     }, 
     600:{ 
      items:1 
     }, 
     1000:{ 
      items:1 
     } 
    } 
    }); 
} 

Answer 1

嘗試增加此選項：

responsiveRefreshRate: 10

默認值是200，這意味着如果您調整窗口圖像大小後200毫秒響應。

例子：

$('#carousel-1').owlCarousel({ 
    nav: true, 
    dots: true, 
    animateIn: 'zoomIn', 
    animateOut: 'zoomOut', 
    responsiveRefreshRate: 10, 
    navText: false, 
    responsive: { 
    0: { 
     items: 1 
    }, 
    600: { 
     items: 2 
    }, 
    1000: { 
     items: 4 
    } 
    } 
}); 

但是，如果該網站的增長，你可以有性能問題（我想，沒測試過）