使用 iview 组件 Carousel 制作首页轮播图

当我们需要制作轮播图时，一般是使用插件Swiper。

npm i swiper

但是现在iview 中自带了Carousel组件可以制作简单的轮播图，操作起来十分简单。

这是官方给出的Api：

 代码如下：

<Carousel :loop="true" :autoplay="true" :autoplay-speed="3000" arrow="never"  >
  <CarouselItem>
     <img class="img" src="~@/images/home/aboveBase.png" alt=""></img>
     <div class="text_top w">
       <p class="text-summary">镁信开放平台</p>
       <p class="text-summary2">患者为先 | 创新引领 | 践行承诺 | 协作共赢</p>          
     </div>
  </CarouselItem>
  <CarouselItem>
     <img class="img" src="~@/images/home/bottom2.png" alt="">
     <div class="top_2 w">
       <p class="top_slideshow">打造中国创新支付及患者福利平台之最</p>
       <p class="top_slideshow2">助力多层次医疗保障体系构建</p>          
     </div>
  </CarouselItem>
  <CarouselItem>
     <img class="img" src="~@/images/home/bottom3.png" alt="">
     <div class="top_3 w">
       <p class="top_3_slideshow">“互联网+医+药+险”</p>
       <p class="top_3_slideshow2">生态闭环领导者镁信健康</p>
     </div>
  </CarouselItem>
</Carousel>

解释：

:loop="true"      是否开启循环

:autoplay="true"    是否自动切换

:autoplay-speed="3000"   设置切换的时间间隔，单位为毫秒

arrow="never"   切换箭头的显示方式   never（不显示）

效果如下：

注意：这里有一个小问题，就是它这个轮播图的指示器位置，只有三种方式  inside （内部），outside（外部），none（不显示），如果要想自定义指示器的话就得更改组件的css样式

由于是组件自己生成的，要想直接修改属性是加不上的，必须要用深度作用选择器。

css   使用   >>>            less    使用     /deep/              scss  使用   ::v-deep

修改代码如下：

/deep/ .ivu-carousel-dots-inside{
  display:block;
  position:absolute;
  bottom: 300px;
}