为什么配置为显示4项的Owl Carousel轮播仅一行展示3个元素？

问题原因及解决方法 #

导致你设置了items:4却仅显示3个的核心原因及对应解决方案如下：

• 优先排查autoWidth配置冲突
  你当前配置中开启了autoWidth: true，该参数生效时Owl Carousel会优先按每个item的实际宽度计算单行可容纳数量，你设置的固定items数值会被覆盖，大概率是你的item宽度经过样式改动后，4个的总宽度超出了轮播容器可用宽度，导致只能放下3个。
  解决方法：直接将autoWidth改为false即可，固定数量展示的场景不需要开启自动宽度，关闭后轮播会自动为每个item分配25%的宽度，刚好放下4个。
• 检查版本适配问题
  如果你近期升级过Owl Carousel版本，注意2.x及以上版本已经废弃了1.x的itemsDesktop、itemsDesktopSmall、itemsMobile这类断点配置参数，需要替换为标准的responsive配置，参考示例：

offerSlider.owlCarousel({
    items: 4,
    autoWidth: false,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:1
        },
        980:{
            items:4
        },
        1200:{
            items:4
        }
    },
    nav: true, // 2.x版本对应原navigation参数
    navText: ["",""],
    dots: true, // 2.x版本对应原pagination参数
    autoplay: true // 2.x版本对应原autoPlay参数
});

• 排查样式改动影响
  检查是否近期修改过item或者轮播容器的样式：
  1. 确认.item类没有额外添加margin、padding、border导致单个元素宽度超出轮播计算值
  2. 确认轮播父容器没有被其他样式挤压，可用宽度足够容纳4个item
• 确认元素间距配置
  如果需要保留item之间的间距，可以通过margin参数配置轮播自带的间距，不要手动给item加margin，避免宽度计算错误，示例：

offerSlider.owlCarousel({
    items: 4,
    autoWidth: false,
    margin: 15, // 配置item之间的横向间距，轮播会自动计算宽度
    // 其余配置...
})

内容的提问来源于stack exchange，提问作者Esam Olwan