設置項爲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>
是否在[文檔首頁]演示(https://owlcarousel2.github.io/OwlCarousel2/)做你在期待什麼?它表示它的響應速度很快 – adriancarriger
@adriancarriger它按照我的預期行事,但它不是我想要的。響應功能對我沒有幫助,因爲它似乎以一次顯示的項目數量開頭,我希望始終顯示一個項目,因此顯示的項目計數更改對我無效。我只想讓滑塊在重要元素上不產生固定寬度的情況下工作。 –