猫头鹰旋转木马没有固定宽度
所以我试图使用Owl Carousel没有固定的宽度,因为我需要一个没有固定图像或宽度的响应Wordpress网站,否则它会打破我的移动视图。猫头鹰旋转木马没有固定宽度
我试着取消注释在owlcarousel.js线,其中_width
和_widths
设置和诸如此类的工作,除了这些物品,然后不.owl-stage
的中心。当我试图改变.owl-stage
的尺寸时,整个事情都爆发了。
任何人都可以提供建议如何做到这一点?我只想要一个响应部署的猫头鹰旋转木马,其中的宽度等是相对的,而不是固定的。
Fiddle
设置项为1
为了使猫头鹰旋转木马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>
我想你可以使用属性width
与单元%
$('.owl-carousel').attr("width", "100%")
随着转盘的单元%宽度将屏幕设备的响应后续的宽度。
其他,你可以使用css3来响应。与你设置宽度不同的屏幕设备的宽度相对应。
这就是我所知道的。如果你想:
- 始终显示1元:你应该设置的
owl-item
宽度为100%和owl-carousel
宽度:100%。或者总是显示2,3,4,5,......你应该设置宽度为owl-item
为(100/2)%,(100/3)%,(100/4)%,... - 对应屏幕将显示桌面4,移动1显示:使用断点设置宽度。在另一方面,你可以尝试属性
min-width
或max-width
为owl-item
,使之
我不认为这是正确的,我需要针对源代码,特别是“猫头鹰项目”和包含舞台的操纵。 –
所以,你需要设置'owl-item'的属性'width'而不是'owl-carousel'而不是'owl-carousel' – nartoan
不,因为'owl-item'的容器的宽度是所有项目的倍数,所以相对于此设置不起作用,因为它比任何单个项目都大。我尝试将它设置为相对于“猫头鹰传送带”元素,但是这些项目没有正确居中,即我有两个项目出现在视图中应该只有一个。 –
是否在[文档首页]演示(https://owlcarousel2.github.io/OwlCarousel2/)做你在期待什么?它表示它的响应速度很快 – adriancarriger
@adriancarriger它按照我的预期行事,但它不是我想要的。响应功能对我没有帮助,因为它似乎以一次显示的项目数量开头,我希望始终显示一个项目,因此显示的项目计数更改对我无效。我只想让滑块在重要元素上不产生固定宽度的情况下工作。 –