为什么我的猫头鹰旋转木马滑块显示只有3个项目在一行，当有应该是4?

Question

我已经设置了我的owl carousel滑块，每行显示4个项目，但现在它一次只显示3个。当我第一次使用它时，它曾经显示4个项目，但我不确定是什么改变了，它现在显示3个，即使我指定它为4。

<div id="offer-slider" class="owl-carousel">
<div class="item">
<div class="offer-container card">
<div class="offer-image">
<img src="./images/016.png" alt="door">
</div>
<h3 class="offer-title">Wooden door</h3>
<div class="order-offer">
<span class="current-price">200</span><span class="currency">AED</span>
<del class="discount-price">
<span>250</span><span class="currency">AED</span>
</del>
<a href="#" class="btn btn-offer">Request</a>
</div>
</div>
</div>
<div class="item">
<div class="offer-container card">
<div class="offer-image">
<img src="./images/010.png" alt="concrete-mixer">
</div>
<h3 class="offer-title">Concrete Mixers</h3>
<div class="order-offer">
<span class="current-price">430</span><span class="currency">AED</span>
<del class="discount-price">
<span>500</span><span class="currency">AED</span>
</del>
<a href="#" class="btn btn-offer">Request</a>
</div>
</div>
</div>
<div class="item">
<div class="offer-container card">
<div class="offer-image">
<img src="./images/011.png" alt="brick-making-machine">
</div>
<h3 class="offer-title">Brick Making Machines
</h3>
<div class="order-offer">
<span class="current-price">1200</span><span class="currency">AED</span>
<del class="discount-price">
<span>1500</span><span class="currency">AED</span>
</del>
<a href="#" class="btn btn-offer">Request</a>
</div>
</div>
</div>
<div class="item">
<div class="offer-container card">
<div class="offer-image">
<img src="./images/018.png" alt="upvc-windows">
</div>
<h3 class="offer-title">UPVC Windows</h3>
<div class="order-offer">
<span class="current-price">600</span><span class="currency">AED</span>
<del class="discount-price">
<span>700</span><span class="currency">AED</span>
</del>
<a href="#" class="btn btn-offer">Request</a>
</div>
</div>
</div>
<div class="item">
<div class="offer-container card">
<div class="offer-image">
<img src="./images/016.png" alt="door">
</div>
<h3 class="offer-title">Wooden door</h3>
<div class="order-offer">
<span class="current-price">200</span><span class="currency">AED</span>
<del class="discount-price">
<span>250</span><span class="currency">AED</span>
</del>
<a href="#" class="btn btn-offer">Request</a>
</div>
</div>
</div>
<div class="item">
<div class="offer-container card">
<div class="offer-image">
<img src="./images/010.png" alt="concrete-mixer">
</div>
<h3 class="offer-title">Concrete Mixers</h3>
<div class="order-offer">
<span class="current-price">430</span><span class="currency">AED</span>
<del class="discount-price">
<span>500</span><span class="currency">AED</span>
</del>
<a href="#" class="btn btn-offer">Request</a>
</div>
</div>
</div>
<div class="item">
<div class="offer-container card">
<div class="offer-image">
<img src="./images/011.png" alt="brick-making-machine">
</div>
<h3 class="offer-title">Brick Making Machines
</h3>
<div class="order-offer">
<span class="current-price">1200</span><span class="currency">AED</span>
<del class="discount-price">
<span>1500</span><span class="currency">AED</span>
</del>
<a href="#" class="btn btn-offer">Request</a>
</div>
</div>
</div>
<div class="item">
<div class="offer-container card">
<div class="offer-image">
<img src="./images/018.png" alt="upvc-windows">
</div>
<h3 class="offer-title">UPVC Windows</h3>
<div class="order-offer">
<span class="current-price">600</span><span class="currency">AED</span>
<del class="discount-price">
<span>700</span><span class="currency">AED</span>
</del>
<a href="#" class="btn btn-offer">Request</a>
</div>
</div>
</div>
</div>

这是我的js代码，我把它设置为4个项目:

var offerSlider = $('#offer-slider');
offerSlider.owlCarousel({
**items: 4,**
autoWidth: true,
itemsDesktop: [1200, 4],
itemsDesktopSmall: [980, 4],
itemsMobile: [600, 1],
navigation: true,
navigationText: ["", ""],
pagination: true,
autoPlay: true,
});
$('.best-offers-left-button').click(function() {
offerSlider.trigger('prev.owl.carousel');
});
$('.best-offers-right-button').click(function() {
offerSlider.trigger('next.owl.carousel');
});

Answer 1

您可以使用此代码-$(文档)时函数(){$("# offer-slider" .owlCarousel ({项目:3、循环:没错,点:没错,播放:没错,分页:假的,导航:假的,responsiveClass:没错,响应:{0: {项目:1、导航:假}，600: {项目:2导航:假}，1000: {项目:3,导航:假的,循环:假}}}(;});

Answer 2

也许你应该试着这样写你的响应代码

$('.owl-carousel').owlCarousel({ loop:true, margin:10, responsiveClass:true, responsive:{ 0:{ items:1, }, 600:{ items:3 }, 1000:{ items:5, } } })