在初始加载时遇到 Owl 轮播宽度问题

Question

我正在研究 owl-carousel。目前我有一个问题，我的滑块宽度表现得非常糟糕。

当我 load/refresh 网站时，owl-carousel 有一些宽度值，但下一张幻灯片的一部分是可见的（我想避免这种情况）。在初始加载后，当我调整 window 大小时（切换最大化，或通过拖动更改宽度或高度）时，它会将宽度设置为我想要的正确值。我不明白为什么会这样。我想在初始加载时防止这种习惯。

这是我的jQuery。

function newsSlider() {
  $('.news-slider .owl-carousel').owlCarousel({
  autoplay: true,
  autoplayHoverPause: true,
  dots: true,
  loop: true,
  margin: 5,
  items: 3,
  responsive: {
    0: {
      items: 1,
    },
    768: {
      items: 2,
    },
    992: {
      items: 3,
    }
  }
 });
}

Answer 1

管理通过设置 fixed width 解决问题。我知道这是一种不好的做法。如果有人能想出一个合适的方法来解决这个问题，欢迎您。谢谢。

Answer 2

我在测量owl-stage容器在工作状态下的宽度时解决了这个问题。然后在样式中设置值，如：

#photo-gallery .owl-stage {
  min-width: 10317px;
}

在初始加载时遇到 Owl 轮播宽度问题

Having Trouble with Owl Carousel Width in initial load

jquery

owl-carousel

owl-carousel-2