Owl Carousel窗口缩放时无法根据视口尺寸切换对应轮播图片

调整窗口尺寸时图片无法同步切换，核心是两个逻辑漏洞：

1. 你开启了Owl Carousel的loop: true配置，插件初始化时会自动克隆若干轮播项实现无缝滚动效果。原有代码通过ideventimg1/eventimg2选择元素修改背景图，只能选中页面初始写死的两个span，插件克隆生成的轮播项里的span没有对应id，根本匹配不到，修改样式时会直接漏掉这部分正在显示的元素。且首次执行图片切换函数在Owl初始化之前，插件克隆元素时会直接复制初始加载的图片地址，后续修改不会同步到克隆项上。
2. 原有尺寸判断逻辑依赖读取其他DOM元素的CSS属性值，一方面jQuery调用.css()只会返回第一个匹配元素的属性，一旦对应选择器匹配到多个元素就会判断失效；另一方面CSS媒体查询触发和JS读取属性之间存在时序差，很容易拿到错误的尺寸档位。

第一步：调整HTML结构，移除id绑定逻辑 #

不要用id绑定单个轮播的图片，给每个轮播项加数据属性存活动序号，Owl克隆元素时会把data属性一起复制，不会出现匹配遗漏的问题。

<div id="at-eventslider" class="at-eventbox owl-carousel">
  <div class="item at-event">
    <span class="at-eventslide" data-event-index="1"></span>
  </div>
  <div class="item at-event">
    <span class="at-eventslide" data-event-index="2"></span>
  </div>
</div>

第二步：重写图片切换逻辑 #

通过通用类选择器匹配所有轮播图片容器，覆盖原生项和Owl克隆项，同时优化尺寸判断逻辑，直接读取窗口宽度判断档位，避免依赖其他元素CSS属性带来的判断误差。

function changeeventimage() {
  const eventsnum = 2;
  // 直接按窗口宽度判断尺寸档位，阈值可根据项目实际媒体查询断点调整
  const windowWidth = $(window).width();
  let pagedimension = "M";
  if (windowWidth >= 1200) {
    pagedimension = "B"; // 大尺寸档位
  } else if (windowWidth < 768) {
    pagedimension = "S"; // 小尺寸档位
  }
  // 选中所有轮播内的图片容器，包括Owl克隆生成的项
  $('.at-eventslide').each(function() {
    const eventIndex = $(this).data('event-index');
    if (eventIndex >= 1 && eventIndex <= eventsnum) {
      $(this).css('background-image', `url(frontend2022/assets/img/events/${eventIndex}${pagedimension}eventbanner.png)`);
    }
  })
}

第三步：调整初始化逻辑，增加resize防抖 #

将图片切换函数绑定到Owl初始化完成的回调上，保证首次加载时克隆项也能拿到正确的图片；resize事件增加防抖，避免窗口调整过程中函数频繁触发影响性能。

$(function () {
  // 初始化轮播
  $('#at-eventslider').owlCarousel({
    items: 1,
    nav: true,
    loop: true,
    dots: false,
    autoplay: true,
    onInitialized: changeeventimage // 轮播渲染完成后加载对应尺寸图片
  });
  // 防抖处理resize事件
  let resizeTimer = null;
  $(window).on('resize', function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(changeeventimage, 150);
  })
});

• 代码中判断尺寸档位的宽度阈值（1200px、768px）请和你项目实际的响应式断点保持一致，和原有大、小尺寸的触发规则对齐即可。
• 如果需要保留原有通过CSS属性判断尺寸的逻辑，请确保.at-megamenuimagearea、.at-category两个选择器在页面中全局唯一，避免jQuery读取到错误元素的属性值导致档位判断失效。

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