为什么我的猫头鹰轮播滑块应该连续显示 3 个项目，而应该是 4 个？答案

【问题标题】：Why is my owl carousel slider showing only 3 items in a row when there are supposed to be 4?为什么我的猫头鹰轮播滑块应该连续显示 3 个项目，而应该是 4 个？
【发布时间】：2021-08-23 12:34:55
【问题描述】：

我已将我的 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');
});

【问题讨论】：

它运作良好
它显示了 4 件商品吗？
是的，你用的是什么版本的猫头鹰？
最新的，2.3.4。你有大屏幕吗？
如果您使用的是最新版本，请使用示例文件夹中的示例

标签： javascript html jquery css owl-carousel

【解决方案1】：

您可以使用此代码 - $(文档).ready(函数() { $("#offer-slider").owlCarousel({ 项目：3，循环：真，点：真，自动播放：真，分页：假，导航：假，响应类：真，响应：{ 0：{ 项目：1，导航：假 }, 600：{ 项目：2，导航：假 }, 1000：{ 项目：3，导航：假，循环：假 } } }); });

【讨论】：

谢谢。但是，我试图显示 4，而不是 3。

【解决方案2】：

也许您应该尝试编写这样的响应式代码

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

【讨论】：