为什么我的owl carousel滑块只显示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

您可以使用此代码-$(文档).ready(){ $("#offer-slider").owlCarousel({ items:3，loop:true，dots:true，autoplay:true，分页:false，导航:false，响应类:true，响应式：{ 0:{ items:1，nav:false }，600:{ items:2，nav:false }，1000:{ items : 3，nav:false，loop:false } })；})；

Answer 2

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

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