javascript - 猫头鹰轮播下一张幻灯片 View

Question

我将 owl carousel 2.0 用作全屏 slider 。此处示例:http://pixelbypixel.comli.com/

除细节外，它运行良好:如果用户调整屏幕大小使其变大，则下一张幻灯片/图像的一部分会显示几秒钟:

有什么办法可以解决吗？例如，此 slider 不会发生此问题: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

尝试添加这个选项:

响应刷新率: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
    }
  }
});

但如果网站增长，您可能会遇到性能问题(我想，没有测试过)