猫头鹰旋转木马没有固定宽度

Question

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

我尝试取消注释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
})

完整代码

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我认为你可以使用单位％

的属性width

$('.owl-carousel').attr("width", "100%")

旋转木马的单位％宽度将响应屏幕设备的宽度。

其他，您可以使用css3来响应。与屏幕设备的宽度相对应，您可以设置不同的宽度。

我知道的全部。如果你想：

1. 始终显示1个元素：您应将owl-item的宽度设置为100％，owl-carousel的宽度为：100％。或者始终显示2,3,4,5，....应设置宽度owl-item为（100/2）％，（100/3）％，（100/4）％，...
2. 对应屏幕显示4表示桌面，1表示移动：显示使用断点设置宽度。在其他情况下，您可以尝试min-width的{​​{1}}或max-width属性来制作