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

Question

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

我试着取消注释在owlcarousel.js线，其中_width和_widths设置和诸如此类的工作，除了这些物品，然后不.owl-stage的中心。当我试图改变.owl-stage的尺寸时，整个事情都爆发了。

任何人都可以提供建议如何做到这一点？我只想要一个响应部署的猫头鹰旋转木马，其中的宽度等是相对的，而不是固定的。

Answer 1

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>

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或max-width为owl-item，使之