61 lines
1.8 KiB
HTML
61 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<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">
|
|
<title>Document</title>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.0/css/swiper.min.css">
|
|
</head>
|
|
<body>
|
|
|
|
|
|
<div class="swiper-container">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
<img src="https://yanxuan.nosdn.127.net/868db3139729795f91da4aa321836d52.jpg?imageView&quality=95&thumbnail=1920x420" alt="" srcset="">
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<img src="https://yanxuan.nosdn.127.net/d9f047ef9de7242e8e06bce66dab1f50.jpg?imageView&quality=95&thumbnail=1920x420" alt="" srcset="">
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<img src="https://yanxuan.nosdn.127.net/9f461421706eb94a41ff7180fc1a9744.jpg?imageView&quality=95&thumbnail=1920x420" alt="" srcset="">
|
|
</div>
|
|
</div>
|
|
<!-- 如果需要分页器 -->
|
|
<div class="swiper-pagination"></div>
|
|
|
|
<!-- 如果需要导航按钮 -->
|
|
<div class="swiper-button-prev"></div>
|
|
<div class="swiper-button-next"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.0/js/swiper.min.js"></script>
|
|
|
|
<script>
|
|
var mySwiper = new Swiper ('.swiper-container', {
|
|
direction: 'horizontal', // 垂直切换选项
|
|
loop: true, // 循环模式选项
|
|
effect : 'coverflow',
|
|
|
|
// 如果需要分页器
|
|
pagination: {
|
|
el: '.swiper-pagination',
|
|
},
|
|
|
|
// 如果需要前进后退按钮
|
|
navigation: {
|
|
nextEl: '.swiper-button-next',
|
|
prevEl: '.swiper-button-prev',
|
|
}
|
|
})
|
|
</script>
|
|
</body>
|
|
</html> |