当我们需要制作轮播图时,一般是使用插件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;
}