如何解决轮播图片未在移动设备中显示
我有轮播图片。它可以在便携式设备上正常工作,但在移动设备上,图像无法显示。我正在使用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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。