0

我在使用Owl Carousel 2滑块时遇到了一个小问题（但非常烦人）。

本质上，我想要一个最大宽度为 824 像素的单项滑块，因为它是我的图像的大小。其余时间，滑块是其父项宽度的 95%。

.owl-carousel {
  display: none;
  max-width: 824px;
  width: 95%;
  height: auto;
  margin: 0 auto;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  z-index: 1;
}

.owl-carousel .owl-stage {
  position: relative;
  -ms-touch-action: pan-Y;
}

.owl-carousel .owl-stage:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.owl-carousel .owl-stage-outer {
  position: relative;
  overflow: hidden;
  -webkit-transform: translate3d(0px, 0px, 0px);
}

.owl-carousel .owl-refresh .owl-item {
  display: none;
}

.owl-carousel .owl-item {
  position: relative;
  min-height: 1px;
  height: auto;
  float: left;
  width: 100%;
  -webkit-backface-visibility: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.owl-carousel .owl-item img {
  display: block;
  width: 100%;
  -webkit-transform-style: preserve-3d;
}

我的问题是，如果由于我的视口大小，我的滑块的父类将我的项目调整为 824px 宽度（我之前为主容器设置的最大宽度），则会发生这种情况：

http://i.imgur.com/Vk3s7f4.jpg

编辑 1：制作了一个快速的 codepen。要查看问题，请正常查看页面，然后手动调整其大小（尝试大约 800px 的宽度），然后刷新。

如您所见，下一个项目部分显示在右侧，就像我的活动项目只是不想以 100% 填充其容器。奇怪的是，只有当页面以这个视口宽度加载时才会发生这种情况；如果我尝试通过手动调整浏览器窗口的大小来复制该问题，那么一切看起来都还可以，并且按预期运行。如果我尝试使用填充（图像上的边框和项目中的填充，将它们分开）来“修复”它，那么在手动窗口调整大小时会发生奇怪的事情——所以这不是一个选项。

如何让项目在任何视口大小下以 100% 填充滑块宽度？

编辑 2：有人建议 jQuery 脚本间歇性工作很可能是一个问题。我在阅读我没有写过的 jQuery 方面并不出色，所以我能得到第二个意见吗？

4

0 回答 0