官方網址：https://www.swiper.com.cn/

1、點擊導航欄，獲取Swiper里邊的下載Swiper

2、選擇要下載的版本【本次案例版本5.4.5】，然后解壓縮文件夾，拿到swiper.min.js和swiper.min.css文件，放到項目對應的css文件和js文件里。

注意：從Swiper7開始，容器默認類名由'.swiper-container'變更為'.swiper'。

3、在官網的在線演示欄目，選擇與項目需求類似的案例效果，【完全一樣的案例效果，比較少，都需要自己修改的】，然后選擇右上角的在新窗口打開。

4、右鍵查看網頁源代碼。

5、復制html頁面代碼，放到自己項目里，我這里單獨建了一個div專門放輪播圖的。

6、復制樣式頁面代碼，放到自己項目里。

7、復制js部分代碼，并且放到自己項目里。

8、復制完成之后，此時頁面展示效果，如下圖所示：

9、頁面效果并不是自己想要的，例如分頁器有小圓點樣式，我們打開官網的API文檔，找到pagination（分頁器），這里我們不需要小圓點，所以在js里邊直接刪掉這個配置即可。

10、這里我們需要輪播圖兩側是帶箭頭的，現在沒有，看API里邊猜測應該是，navigation前進后退按鈕，如果猜不到的話，可以在官網的案例中，找到左右兩側帶箭頭的，查看它的源代碼中的js部分，看看有添加什么屬性，html和css，也要查看相應增加。

11、將樣式為swiper-slide里面的內容，換成我們的內容，并且調整樣式，添加flex-direction: column;調整成上邊圖片，下邊文字的效果，并且需要調整圖片和文字的大小等等。

12、還有細節部分需要調整，比如中間聚焦的圖片會被右側圖片壓住，需要提升層級z-index，兩邊的圖片透明度需要降低些opacity，要與中間圖片形成鮮明對比。

13、整個輪播圖的寬度定位到540像素，箭頭拿到整個圖片的外側。

14、按照需要調整細節，修改后如下圖所示：