时间戳

首页 > 解决方案 > 轮播图像未显示在移动设备中

html - 轮播图像未显示在移动设备中

问题描述

我有轮播图片。它与笔记本电脑设备正常工作，但在移动设备中，图像不显示。我正在使用 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>

标签： htmljquerycsscarousel

解决方案

$('.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

推荐阅读