Owl Carousel 不适用于主机上的 chrom

Question

我在我的项目中使用了 owlCarousel，以特殊产品动画的方式，并且在每张幻灯片 4 个产品中显示，它在我的本地设备上正常工作，但在主机上，产品没有动画，但在其他浏览器上它们工作正常。即使我有使用了我在帖子中提到的 chrome 的特殊 css，但没有更多动画。

<script type="text/javascript">
    
    $('.owl-carousel').owlCarousel({
        loop: true,
        margin: 0,
        //nav: true,
        center: true,
        autoplay: true,

        autoplayTimeout: 3000,
        autoplayHoverPause: true,
        responsive: {
            0: {
                items: 1
            },
            600: {
                items: 3
            },
            1000: {
                items: 4
            }
        }
    });

    $('.autoplay').slick({
        slidesToShow: 3,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 2000
    });

 
</script>

 <style type="text/css">
    .owl-carousel .owl-wrapper-outer {
        overflow: hidden;
        position: relative;
        width: 100%;
        nav-right:initial;
        z-index: 1; /* added this */
    }

    .owl-item {
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        -ms-transform: translateZ(0);
    }

    </style>

<link href="/lib/owlcarousel/owl.theme.min.css" rel="stylesheet">
    <link href="/lib/owlcarousel/owl.transitions.min.css" rel="stylesheet">
    <link href="/lib/owlcarousel/owl.carousel.min.css" rel="stylesheet">
    <link href="~/lib/owlcarousel/owl.theme.default.min.css" rel="stylesheet" />
    
     <div class="owl-carousel owl-theme item-carousel" data-toggle="owlcarousel" data-owlcarousel-settings='{"items":4,  "navigation":true, "itemsScaleUp":true}'>
                    @Html.Action("ShowSpecialProducts", "Home")
                </div>
                
    <script src="/lib/jquery/jquery.min.js"></script>
  
    <script src="/lib/owlcarousel/owl.carousel.min.js"></script>             

@model IEnumerable<BehinFlex.Models.Products>

@foreach (var item in Model)
{
    <div class="item">
        <a href="#" class="overlay-wrapper">
            <img src="/ProductImages/Image/@item.ProductImageUrl" alt="ISOROLLS" class="img-responsive underlay" style="width:250px; height: 175px;">
            <span class="overlay">
                <span class="overlay-content"> <span class="h4">@item.ProductEnTitle </span> </span>
                @if (item.Discounts.Any())
                {
                    <span class="overlay-content">
                        <span>Discount:</span><span>%</span> @item.Discounts.FirstOrDefault().DiscountPercent.ToString("D")
                    </span>
                }
            </span>
        </a>

        <div class="item-details bg-noise">
            <h4 class="item-title">
                <a href="#">@item.ProductTitle</a>

            </h4>
            <a href="/Product/ShowProduct/@item.ProductID" class="btn btn-more i-right">more information<i class="fa fa-plus"></i></a>
        </div>
    </div>

}

Answer 1

就我而言，这是延迟加载问题，它无法理解屏幕上出现的图像，因此我停止了轮播图像的延迟加载。 我改变了这个：

<img loading="lazy" src="image.jpg" alt="..." />

对此：

<img src="image.jpg" alt="..." />