通过CSS @media控制OwlCarousel响应式配置脚本失效如何解决

原方案失效原因 #

CSS 的display属性仅控制元素的页面渲染可见性，无法阻止<script>标签内的JS代码执行，你写的两个脚本会在页面加载时同时运行，因此无法实现按屏幕尺寸切换配置的效果。

最优解决方案 #

OwlCarousel 本身已经内置了响应式断点配置能力，不需要拆分多个脚本，也不需要额外写CSS控制，直接合并配置即可：

<script>
$(document).ready(function() {
  $(".owl-carousel").owlCarousel({
    loop:true,
    dots:true,
    autoplayspeed:1000,
    smartspeed:1500,
    autoplayhoverpause:true,
    // 原生响应式配置，key是断点宽度（min-width匹配逻辑），value是对应断点的配置
    responsive: {
      0: {
        items: 2 // 宽度小于1001px时显示2个
      },
      1001: {
        items: 4 // 宽度大于等于1001px时显示4个
      }
    }
  });
});
</script>

• 该方案不仅会在页面首次加载时自动匹配当前屏幕宽度的配置，用户手动调整浏览器窗口尺寸时，也会自动切换对应配置，无需额外写 resize 监听逻辑
• 原来拆分的两个script标签、控制script显示隐藏的CSS代码都可以直接删除

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