採用iview組件實現輪播圖效果

（1）先放出示例代碼，即：

 1 <template>
 2   <div class="header">
 3     <Carousel>
 4         <Carousel-item>
 5             <div class="demo-carousel">
 6               <img class="demo-img" src="http://img1.qunarzz.com/piao/fusion/1806/fc/e47aa3e1c67bbc02.jpg_750x200_0f3eecf8.jpg" />>
 7             </div>
 8         </Carousel-item>
 9         <Carousel-item>
10             <div class="demo-carousel">
11               <img class="demo-img" src="http://img1.qunarzz.com/piao/fusion/1806/fc/e47aa3e1c67bbc02.jpg_750x200_0f3eecf8.jpg" />>
12             </div>
13         </Carousel-item>
14         <Carousel-item>
15             <div class="demo-carousel">
16               <img class="demo-img" src="http://img1.qunarzz.com/piao/fusion/1806/de/df09fa61aed2d502.jpg_750x200_67472739.jpg">
17             </div>
18         </Carousel-item>
19     </Carousel>
20   </div>
21 </template>
22 
23 <script>
24 export default {
25   name: 'HomeHeader'
26 }
27 </script>
28 
29 <style lang="stylus" scoped>
32   .demo-img
33     width: 100%
34 </style>

（2）一開始引入圖片的時候，圖片會很是大，但給<img>標籤中增長增長1個樣式，其中將width設置成100%便可實現正常顯示。

（3）但採用iview組件沒法實現經過手指撥動圖片的效果，並且左右顯示的位置不是中間位置；

（4）也試了一下element ui組件，仍是仍是better-scroll比較好用。

效果以下：