Jquery 猫头鹰转盘无固定宽度

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

我试着在owlcarousel.js中取消注释设置了

\u width

和

\u width

的行，这种方法很有效，只是项目没有在

.owl stage

中居中。当我试图改变

.owl stage

的维度时，整个东西都坏了

---

有人能就如何做到这一点提供建议吗？我只想在宽度等是相对的，而不是固定的情况下，对Owl转盘进行响应性部署。

我认为您可以使用属性

宽度

和单位%

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

旋转木马的单位%宽度将跟随屏幕设备的宽度

另外，您可以使用css3来响应。对应于屏幕设备的宽度，您可以设置不同的宽度

这就是我所知道的。如果您想要：

始终显示1个元素：您应该将

owl项目的宽度设置为100%，将
owl旋转木马的宽度设置为100%。或者始终显示2,3,4,5，。。。。您应该将
owl项的宽度设置为（100/2）%，（100/3）%，（100/4）%

与屏幕相对应的是，桌面显示4，手机显示1：您显示使用断点设置宽度。在另一种情况下，您可以尝试使用

owl项的属性
minwidth
或
max width
，使其成为

将项目设置为1 要使Owl转盘2显示单个响应幻灯片，您需要将项目数设置为1而不是默认的3，并且无需使用中提供的响应选项，因为您始终希望显示单个幻灯片

JavaScript 完整代码

$（'.owl carousel'）.owlCarousel({
循环：对，
差额：10，
导航：是的，
项目：1
})

.item{
背景色：#4DC7A0；
颜色：白色；
字体大小：30px；
高度：150像素；
填充：10px；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12

我认为这是不对的，我需要针对源代码，特别是

owl item

的操作和包含阶段。因此，您需要使用单位%来设置

owl item

的属性

width

，而不是

owl carousel

否，因为

owl item

的容器的宽度是所有项的倍数，所以相对于该宽度设置它是不可行的，因为它比任何单个项都大。我尝试将其设置为相对于

owl carousel

元素，但是项目没有正确居中，也就是说，我在视图中显示了两个项目，其中应该只有一个。此外，我不希望使用事后DOM操作来对抗源代码，因为这不如更改源代码本身来获得我想要的加载效果那么可靠。在这种情况下，我不认为您必须更改不同断点的宽度来响应您的请求。上的演示是否达到了预期效果？上面说是responsive@adriancarriger根据文档，它的行为与我期望的一样，但它不是我想要的。响应功能对我没有帮助，因为它似乎是以每次显示的项目数量开头的，我希望始终显示一个项目，因此显示的项目数量的更改对我没有帮助。我只是希望滑块在不生成重要元素的固定宽度的情况下工作。这不会保持图像的纵横比。有解决这个问题的办法吗。？

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