Question

我已经很抱歉没有提供代码段，但我无法在那里重现问题。

所以，我做了一个＆＃34;旋转木马＆＃34;与Owl Carousel。一切都很完美，但是当窗口小于650px左右时，它就不再居中了。

使用Owl Carousel，您可以选择使用选项center:true来居中。这在大屏幕上完美运行，但是当我在智能手机上查看它时，以＃34;为中心＆＃34;项目向右移动。

那是我的结构：

<div class="owl">
  <div>06:00</div>
  <div>07:00</div>
  <div>08:00</div>
  <div>09:00</div>
  <div>10:00</div>
  <div>11:00</div>
  <div>12:00</div>
  ...
</div>

我正在使用这个CSS：

.owl, .owl-stage{
  width:100%;
  height:60px;
  display:flex;
  align-items: center;

  .owl-item{
    display:inline-block;
    min-width:100px;
  }
}

所以没什么特别的，但它仍然决定采取行动。完成它，here you got a codepen。 当您点击日历中的日期时，轮播会显示。

我在Chrome 64.0.3282.186和Internet Explorer中对它进行了测试，两者都给了我相同的行为。

Answer 1

添加以下代码：

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

您可以根据浏览器尺寸管理项目：600:{表示上述浏览器尺寸。

希望这可以帮助你。

当窗口小于~650px时，猫头鹰转盘不居中

1 个答案: