html - 第一个slider-carousel中不显示图片的原因及解决方法
问题描述
我有一个问题并尝试了所有幻灯片,但问题是显示了滑块结构但没有显示图片该项目的唯一问题是滑块不显示照片我什至使用了一个光滑的滑块但我又得到了同样的问题 整个项目都可以在这个链接上 输入链接描述在这里
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="css/slick-theme.css">
<link rel="stylesheet" href="css/slick.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/css/swiper.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./css/reset-css.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<title>Document</title>
</head>
<div class="wrapper">
<div class="owl-carousel owl-theme">
<div class="item"><img src="https://images.pexels.com/photos/2929290/pexels-photo-2929290.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"></div>
<div class="item"><img src="https://images.pexels.com/photos/3519656/pexels-photo-3519656.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"></div>
<div class="item"><img src="https://images.pexels.com/photos/3577391/pexels-photo-3577391.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"></div>
<div class="item"><img src="https://images.pexels.com/photos/3648850/pexels-photo-3648850.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"></div>
<div class="item"><img src="img/pin.png"></div>
<div class="item"><img src="img/bandicam 2019-08-02 16-25-03-568.jpg"></div>
<div class="item"><img src="img/bandicam 2019-08-02 17-07-24-742.jpg"></div>
<div class="item"><img src="img/bandicam 2019-08-02 17-08-20-757.jpg"></div>
<div class="item"><img src="img/bandicam 2020-02-05 14-48-02-096.jpg"></div>
<div class="item"><img src="img/bandicam 2019-07-29 20-39-41-098.jpg"></div>
</div>
</div>
</div>
</section>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script src="js/slick.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/js/swiper.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
type: 'progressbar',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
<script>
$('.owl-carousel').owlCarousel({
loop:true,
autoPlay:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
})
</script>
</body>
</html>
解决方案
推荐阅读
- mongodb - 结果组 cond mongodb push array
- c# - 想从数据库中的表中选择单个列并将其存储在 asp.net 列表中
- message - 如何保持消息处理系统中相关消息的顺序?
- swift - 在 Swift 框架中公开响应式可观察对象
- python - 如何使用 Tkinter-canvas 画一条鱼?
- vue.js - Uncaught ReferenceError: process is not defined vuejs, vuex, Webpack SSR
- jenkins - 从 Jenkins Pipeline 触发 BitBucket 合并
- mysql - 如何从终端恢复mysql数据库备份?
- c# - c# - 如何在已被覆盖的自定义控件上创建事件和更改属性?
- c# - 数据库端事务拆分与应用程序端事务拆分