Owl旋转木马没有像我预期的那样使用ViewPort

Question

我试图使用一个Owl Carousel生成一个ViewPort。但它只循环这些项，而不是将其实际设置为carousel。

这就是我如何从Sql调用Sql，然后将它传输到ViewPort之后，它应该在html中显示，就像一个普通的carousel

$(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);
    }),
    error: (function (xhr, status) {
        alert(status);
    })
})

$('#owl-carousel-2').owlCarousel({
    loop: true,
    nav: true,
    dots: false,
    autoplay: false,
    margin: 10,
    responsive: {
        0: {
            items: 2
        },
        600: {
            items: 3
        },
        1000: {
            items: 4
        }
    }
})
})

这就是我的HTML的样子：

<div class="owl-carousel owl-theme" id="owl-carousel-2">
                   
</div>

在我的ViewPort上

@if (Model != null && Model.Rows.Count != 0)
{
@for (int i = 0, x = 1; i < Model.Rows.Count; i++, x++)
{

    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
    <div class="item"><h4>5</h4></div>
    <div class="item"><h4>6</h4></div>
    <div class="item"><h4>7</h4></div>
    <div class="item"><h4>8</h4></div>
    <div class="item"><h4>9</h4></div>
    <div class="item"><h4>10</h4></div>
    <div class="item"><h4>11</h4></div>
    <div class="item"><h4>12</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>*@
}
}

它试图首先comment的主要项目，以便我可以看到是怎么回事。但还是一样。

这些是代码的输出。

​

​

Answer 1

在尝试了大量的尝试和错误之后，我只需要将owl-carousel function放在ajax success function中

$(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);
         $('#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);
   })
})