采用iview组件实现轮播图效果

Posted 2020-11-21 lanyb009

（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组件无法实现通过手指拨动图片的效果，而且左右显示的位置不是中间位置；

效果如下：