Question

我有轮播图片。它可以在便携式设备上正常工作，但在移动设备上，图像无法显示。我正在使用Owl Carousel v2.3.4。您能否检查下面的代码以查看代码中的错误？预先谢谢你。

<section class="app-screen-one" id="screenshot">
                    <div class="container">
                        <div class="row mb-5">
                            <div class="col-sm-12">
                                <div class="d-sm-flex justify-content-between align-items-center mb-2">
                                    <h3 class="font-weight-medium text-dark ">Let's See The App Screenshot</h3>
                                    <div><a href="#download" class="btn btn-outline-primary">Download Now</a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mb-5" data-aos="fade-up">
                        <div class="app-screen-one__carousel owl-carousel owl-theme">
                            <div class="item">
                                <img src="<?php echo base_url(); ?>images/carousel/signin.png" alt="screen">
                            </div>
                            <div class="item">
                                <img src="<?php echo base_url(); ?>images/carousel/create-account.png" alt="screen">
                            </div>
                            <div class="item">
                                <img src="<?php echo base_url(); ?>images/carousel/login.png" alt="screen">
                            </div>
                            <div class="item">
                                <img src="<?php echo base_url(); ?>images/carousel/provider-profile.png" alt="screen">
                            </div>
                            <div class="item">
                                <img src="<?php echo base_url(); ?>images/carousel/product-list.png" alt="screen">
                            </div>
                            <div class="item">
                                <img src="<?php echo base_url(); ?>images/carousel/home-map.png" alt="screen">
                            </div>
                            
                        </div>
                    </div>
                </section>

Answer 1

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    responsiveClass:true,
    responsive:{
        0:{
            items:1,
            nav:true
        },
        600:{
            items:3,
            nav:false
        },
        1000:{
            items:5,
            nav:true,
            loop:false
        }
    }
})

您是否添加了js以响应该轮播。

有关更多信息，请访问https://owlcarousel2.github.io/OwlCarousel2/demos/responsive.html

您的问题在这里回答：owl-carousel not working in responsive mode

轮播图片未在移动设备中显示

1 个答案: