Question

轮播响应Owlcarousel2无法正常工作！而且不知道为什么！

我的html：

 <div class="owl-carousel-products owl-theme">

        <div class="cursor bg-white rounded mb-2 shadow-sm p-2">
            <a href="">
                <div class="text-center">
                    <img class="image-resize-product" loading="lazy" src="{{ asset('cp/my-stuff/frontend/imgs/pro3.png') }}" alt="">
                </div>
                <div class="ml-2">
                    <p>Acetram</p>
                    <p class="text-muted">Artmiuimn</p>
                </div>
                <div class="d-flex justify-content-md-between ml-2 mr-2 pt-2 pb-2">
                    <p>$10</p>
                    <del class="text-muted">50$</del>
                </div>
                <div class="text-center">
                    <button type="submit" class="btn btn-success btn-product size">@lang('site.add_to_cart')</button>
                </div>
            </a>
        </div>

       
      there is more

    </div>

$(document).ready(function(){
    $(".owl-carousel-products").owlCarousel({
        dots: false,
        lazyLoad: true,
        loop:true,
        autoplay: true,
        items : 7,
        responsiveClass:true,
        responsive : {
            480 : { items : 1  },
            768 : { items : 2  },
            1024 : { items : 7 },
        },
    });
});

使用此代码仅显示一个产品（项目），而其他产品则显示第一个产品！而且没有幻灯片！

Answer 1

$(document).ready(function(){
    if($('.owl-carousel-products').length){
          $('.owl-carousel-products').owlCarousel({
            loop: true
            , margin: 70
            , nav: false
            , dots: true
            , center: true
            , autoWidth: true
            , responsive: {
                0: {
                    items: 1
                }
                , 600: {
                    items: 1
                }
                , 1000: {
                    items: 2
                }
            }
          });
        }});

请尝试一下。请先删除items : 7，然后再添加responsive

为什么响应式Owlcarousel2无法正常工作？

1 个答案: