輪播圖使用swiper方法
swiper使用方法
1.首先需要下載插件，npm install swiper，不同版本的swiper需要略有不同。可下載swiper文件或使用CND。
2.添加html內容，swiper7默認容器是“swiper”，swiper6的是“swiper-container”。
3.定義一個swiper容器，添加照片（想讓幾張圖輪播就放幾張圖片），小圓頂分頁器、上一頁、下一頁。
html代碼如下：
css代碼如下：
4.要想輪播圖動起來還需要寫js
聲明swiper，屬性包括autoplay，每多少秒輪播一次、loop，可以讓圖片無限循環、effict，實現3D效果。
swiper輪播的優點
1.swiper是純javascript打造的滑動特效插件，面向手機、平板電腦等移動終端。
2.swiper能實現觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等常用效果。
3.swiper開源、免費、穩定、使用簡單、功能強大，是架構移動終端網站的重要選擇！
swiper輪播的缺點
使用Swiper輪播插件ajax請求加載圖片時，無法滑動。（因為banner圖是動態創建的，在插件開始初始化時，文檔流中沒用圖片，所以沒有創建相應寬度，通過調整js加載順序，問題還是沒有解決。最后找到swiper插件 api 有屬性是可以根據內容變動，自動初始化插件的，添加observer：true后問題解決！）