72 lines
1.4 KiB
HTML
72 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Title</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="swiper.css">
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<div class="swiper">
|
|
|
|
<ul class="swiper-wrapper" style="transform: translateX(0px);">
|
|
<li>
|
|
<img src="img/1.jpg" alt="">
|
|
</li>
|
|
<li>
|
|
<img src="img/2.jpg" alt="">
|
|
</li>
|
|
<li>
|
|
<img src="img/3.jpg" alt="">
|
|
</li>
|
|
</ul>
|
|
|
|
<!-- 如果需要分页器 -->
|
|
<ul class="swiper-pagination"></ul>
|
|
|
|
<!--上一页-->
|
|
<div class="swiper-button prev"><</div>
|
|
<!--下一页-->
|
|
<div class="swiper-button next">></div>
|
|
|
|
</div>
|
|
|
|
<button>点我</button>
|
|
|
|
</body>
|
|
<script src="swiper.js"></script>
|
|
<script>
|
|
|
|
var lbo = new lb(".swiper",{
|
|
time: 1000,
|
|
initialSlide: 0,
|
|
loop: false,
|
|
speed: 300,
|
|
autoplay: false,
|
|
grabCursor: true,
|
|
// on: {
|
|
// slideChange: function (index) {
|
|
// console.log(index);
|
|
// },
|
|
// startChange: function (index) {
|
|
// console.log(this.index);
|
|
// },
|
|
// },
|
|
});
|
|
|
|
// lbo.on('slideChange', function (index) {
|
|
// console.log(index)
|
|
// });
|
|
//
|
|
// lbo.on('startChange', function (index) {
|
|
// console.log(index)
|
|
// });
|
|
|
|
document.querySelector("button").onclick = () => {
|
|
lbo.slideTo(2);
|
|
}
|
|
|
|
</script>
|
|
</html> |