引入swiper文件
使用swiper做轮播效果
使用动态swiper会导致swiper初始化过早,给swiper封装一个函数,再做一个定时器,模拟从后端接收数据的过程,在定时器末尾写入给swiper封装的函数,可以解决这个问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/swiper8/swiper-bundle.min.css">
<style>
.dqf {
height: 500px;
}
.swiper-slide img {
width: 100%;
height: 100%;
}
header,
footer {
text-align: center;
}
.swiper-button-next {
position: absolute;
right: 0;
top: 350px;
}
.swiper-button-prev {
position: absolute;
left: 0;
top: 350px;
}
.swiper-horizontal>.swiper-pagination-bullets {
bottom: 240px;
}
</style>
</head>
<body>
<header>
<h1>11</h1>
</header>
<div class="swiper-container dqf">
<div class="swiper-wrapper">
<!-- <div class="swiper-slide">11111</div>
<div class="swiper-slide">22222</div>
<div class="swiper-slide">33333</div> -->
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
</div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<!-- <div class="swiper-scrollbar"></div> -->
<!-- </div> -->
<!-- 导航等组件可以放在Swiper容器之外 -->
<footer>
<h1>yyds</h1>
</footer>
<script src="/swiper8/swiper-bundle.min.js">
</script>
<script>
// swiper初始化过早
setTimeout(() => {
var list = ['45adee1aa5de0f9213d789892502cc4.jpg', '139ba566a8d10305bf21a2f985b95f4.jpg', '微信图片_20220630173553.jpg']
var newlist = list.map(item =>
`<div class="swiper-slide"><img src='${item}'></img></div>`)
console.log(newlist.join())
var owrapper = document.querySelector('.swiper-wrapper')
owrapper.innerHTML = newlist.join()
init()
//.map把一个字符串 隐射成其他字符串
}, 2000)
function init() {
new Swiper(".dqf", {
// direction: 'vertical', // 垂直切换选项
loop: true, // 循环模式选项
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
})
}
</script>
</body>
</html>