swiper外掛上下滑動巢狀左右滑動實現方式
阿新 • • 發佈：2020-07-30
問題：近日在做專案過程中遇到問題，想要在首頁上下滑動的基礎上實現第二屏左右滑動
解決：檢視swiper中文官方文件發現如何處理 ，重點區分好垂直滑動和水平滑動container和分頁器pagination，避免兩者衝突
預備工作：1、匯入swiper外掛（注意：一定要在頭部匯入）2、設定樣式
<head> <link rel="stylesheet" href="../dist/css/swiper.min.css"> </head>
3、建立垂直container和水平container
<div class='swiper-container swiper-container-v'>
<div class='swiper-wrapper'>
<div class='swiper-slide'>Vertical Slide</div>
<div class='swiper-slide'>
<div class='swiper-container swiper-container-h'>
<div class='wrapper'>
<div class='swiper-slide'>Horizontal Slide1</div>
<div class='swiper-slide'>Horizontal Slide2</div>
<div class='swiper-slide'>Horizontal Slide3</div>
</div>
<div class='swiper_pagination swiper-pagination-h'></div>
</div>
</div>
<div class='swiper-slide'>Vertical Slide2</div>
<div class='swiper-slide'>Vertical Slide3</div>
</div>
<-- add pagination-->
<div class='swiper_pagination swiper-pagination-v'></div>
</div>
4、匯入swiper的js檔案 並對swiper進行設定
<script src="../dist/js/swiper.min.js"></script>
<script>
var swiperV = new Swiper('.swiper-container-v',{
pagination:'.swiper-pagination-v',
paginationClickable:true, #表示該分頁器可以點選
direction:'vertical', #設定滾動方向，預設H
spaceBetween:50 #設定滾動速度
});
var swiperH = new Swiper('.swiper-container-h',{
pagination:'.swiper-pagination-h',
paginationClickable:true,
spaceBetween:50
});
</script>
完成！