猫头鹰传送带下一张幻灯片视图

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 
    } 
    } 
}); 

但是，如果该网站的增长，你可以有性能问题（我想，没测试过）