轮播图片未在移动设备中显示
Carousel images not showing in mobile device
我有轮播图片。它在笔记本电脑设备上正常工作,但在移动设备上,图像不显示。我正在使用 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>
$('.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 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>
$('.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
您的问题在这里得到解答: