Owl Carousel 2响应宽度问题

Question

我对Owl Carousel 2滑块有轻微（但非常烦人）的问题。

基本上，我想要一个最大宽度为824px的单项滑块，因为它是我图像的大小。其余时间，滑块是其父级宽度的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宽度（我之前为主容器设置的最大宽度）下，会发生这种情况：

编辑1： Made a quick codepen。要查看问题，请正常查看页面，然后手动调整页面大小（尝试宽度约为800px），然后刷新。

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

如何在任何视口尺寸中让项目以100％填充滑块宽度？

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