如何實現Swiper圖片滑動4.5效果
所謂滑動4.5的結果就是，首頁顯示4張圖片，然后右邊顯示0.5張，這樣告訴別人后面還有，您可以拖動過來，下面小編來給大師講解下4.5結果在現實項目中的運用吧
東西/原料
- Swiper
方式/步調
- 1
先把Swiper的開辟包下載下來
- 2
然后查看下demo的格局，可發現他是swiper-container>swiper-wrapper>swiper-slide這樣一個三層布局，加一個分頁swiper-pagination（這個無關緊要），然后經由過程?new Swiper初始化
- 3
項目中只需要把css和js引入即可
- 4
然后經由過程代碼輪回加載swiper-slide布局的，因為今朝程序中只有4張圖片，所以下面零丁加了兩張
- 5
下一步最主要一點，設置4.5視圖模式，JS直接給賦值當作4.5即可，new Swiper('#home2',{slidesPerView: 4.5});
- 6
實現結果圖
- 發表于 2019-12-21 20:00
- 閱讀 ( 731 )
- 分類：其他類型
admin
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章