作為一名后端的普通程序猿， 你讓我搞這種前端不是跟我玩命嗎，所以用插件來搞，省事又簡單，而且Swiper使用又簡單是吧；
頭皮發麻，不喜歡說廢話，我更喜歡直接看到效果；
按Swiper官方文檔來說， 它需要配合JQuery來使用，所以也需要引入JQ；
1， 先去官網下載一波它的 CSS, JS 文件先，https://2.swiper.com.cn/download/index.html#file1
下載完直接引入即可上手用了， 路徑自己改。
<link rel="stylesheet" href="css/swiper.min.css">
<script src="js/swiper.min.js"></script>
2， 廢話不多說， 直接上測試例子；
HTML（swiper的寫法）：
container： 裝所有滑動slide的容器
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide blue-slide">內容1</div>
<div class="swiper-slide red-slide">內容2</div>
<div class="swiper-slide orange-slide">內容3</div>
<div class="swiper-slide blue-slide">內容4</div>
<div class="swiper-slide orange-slide">內容5</div>
</div>
CSS（這個按自己喜歡來調， 例子當然是越簡單越好）:
<!-- Demo styles -->
<style> * { margin: 0; padding: 0;
} .blue-slide { background: #4390EE;
} .red-slide { background: #CA4040;
} .orange-slide { background: #FF8604;
} .swiper-slide { line-height: 300px; color: #fff; font-size: 36px; text-align: center;
}
</style>
JS：
如果只是簡單做輪播圖，autoplay 和 loop 這兩個參數即可；
里面的注釋我已經寫好了， 更多的參數或者功能可以去官網找下即可；
<!-- Initialize Swiper -->
<script>
var mySwiper = new Swiper('.swiper-container',{ loop : true, // 形成環路，不斷循環， 跟autoplay可組成輪播圖
autoplay: { delay: 1000,//1秒切換一次
}, initialSlide: 2, // 一開始就放到所有中間的位置
slidesPerView: 3, // slider容器能夠同時顯示的slides數量
centeredSlides: true, // 默認狀態下slide居左，但是居左有問題，取到的slide下標有誤，一般設為true:居中
slideToClickedSlide: true, // 點擊slide會過渡到這個slide
effect : 'coverflow', // 切換效果, coverflow:3D流 (可選)
coverflowEffect: { // 切換效果的參數
rotate: 0, stretch: 5, depth: 60, modifier: 2, slideShadows : true }, on:{ click:function(){ alert(this.clickedIndex); //當前點擊的是第幾張
}, transitionEnd: function(event){ img_index = this.activeIndex; //滑動到第幾張
}, } }); </script>
效果如下：
