Owl Carousel使用ViewPort异步加载数据后轮播效果失效问题

• 异步执行时序错误：$.ajax默认是异步执行，你在$(document).ready里发起Ajax请求后，立刻执行了Owl Carousel初始化逻辑，这时候接口数据还没返回，#owl-carousel-2容器是空的，组件初始化时读取不到任何轮播项。等后续Ajax返回结果把HTML插入容器时，组件已经完成初始化，不会自动识别新加入的DOM节点，最终导致所有列表项直接平铺，没有轮播交互效果。
• 视图循环逻辑错误：你在Razor视图的for循环代码块里，硬编码了12个固定的.item元素，这会导致只要Model.Rows存在1条数据，页面就会重复渲染12个固定测试项；如果Model.Rows有多条数据，最终渲染的项数会是「数据行数*12」，和预期的一条数据对应一个轮播项的逻辑完全不符。

1. 调整JS执行顺序 #

把Owl Carousel的初始化逻辑移动到Ajax请求的success回调内部，确保轮播项完全插入DOM之后再初始化组件，修正后的初始化代码如下：

$(document).ready(function () {
  $.ajax({
    url: "/Home/Automatic1",
    contentType: "application/html; charset=utf-8",
    type: 'GET',
    dataType: "html",
    success: function (result) {
      // 先插入渲染好的轮播项
      $('#owl-carousel-2').html(result);
      // DOM插入完成后再初始化轮播组件
      $('#owl-carousel-2').owlCarousel({
        loop: true,
        nav: true,
        dots: false,
        autoplay: false,
        margin: 10,
        responsive: {
          0: { items: 2 },
          600: { items: 3 },
          1000: { items: 4 }
        }
      })
    },
    error: function (xhr, status) {
      alert(status);
    }
  })
})

2. 修正视图层循环逻辑 #

移除for循环内部重复硬编码的12个测试项，保证每次循环只输出一个轮播项，测试阶段可以用循环变量输出序号，后续直接替换为你的业务卡片代码即可，修正后的视图代码如下：

@if (Model != null && Model.Rows.Count != 0)
{
  @for (int i = 0; i < Model.Rows.Count; i++)
  {
    // 测试阶段用下面这行输出序号，验证循环逻辑
    <div class="item"><h4>@(i+1)</h4></div>

    @* 业务逻辑验证通过后，删除上面的测试项，放开下面的注释即可
    <div class="item">
      <div class="text-center">
        <div class="card">
          <div class="card-img-top">
            <img src="~/images/acce-image/@Model.Rows[i][0]" />
          </div>
          <div class="card-title">
            @Model.Rows[i][1]
          </div>
          <div class="card-price">
            @Model.Rows[i][2]
          </div>
        </div>
      </div>
    </div>
    *@
  }
}

补充说明：如果后续需要在页面不刷新的情况下动态更新轮播内容，不要重复调用owlCarousel()初始化方法，要使用组件提供的replace.owl.carousel事件更新内容，避免组件重复渲染报错。

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