jquery - Owl Carousel 不固定宽度

Question

所以我尝试使用 Owl Carousel没有固定宽度，因为我需要一个没有固定图像或宽度的响应式 WordPress 网站，否则它会破坏我的移动 View 。

我尝试取消注释 owlcarousel.js 中设置 _width 和 _widths 的行，这种方法有效，只是项目没有在 中居中>.owl-stage。当我尝试改变 .owl-stage 的尺寸时，整个东西都坏了。

任何人都可以提供有关如何执行此操作的建议吗？我只想要 Owl Carousel 的响应式部署，其中宽度等是相对的，而不是固定的。

Answer 1

Fiddle

将项目设置为 1

要使 Owl Carousel 2 显示单个响应式幻灯片，您需要将项目数设置为 1 而不是默认的 3，并且无需使用 the docs 中提供的响应式选项。因为您总是想显示单张幻灯片。

JavaScript

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    items: 1
})

完整代码

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    items: 1
})

.item {
  background-color: #4DC7A0;
  color: white;
  font-size: 30px;
  height: 150px;
  padding: 10px;
}

<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<div class="owl-carousel owl-theme">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
    <div class="item"><h4>5</h4></div>
    <div class="item"><h4>6</h4></div>
    <div class="item"><h4>7</h4></div>
    <div class="item"><h4>8</h4></div>
    <div class="item"><h4>9</h4></div>
    <div class="item"><h4>10</h4></div>
    <div class="item"><h4>11</h4></div>
    <div class="item"><h4>12</h4></div>
</div>