Carousel (轮播图)
轮播图
常见哦
引入
import {Carousel, CarouselItem} from 'sinoiov-ui'
Vue.component(Carousel.name, Carousel)
Vue.component(CarouselItem.name, CarouselItem)
/* 注意：CarouselItem组件不是必须的，当需要自定义轮播内容时才需要。
如果仅仅是图片的轮播，则只需要使用Carousel组件，
通过data属性指定图片数组，具体见下面示例 */
代码示例
基本用法
向data属性传入一个图片数组，data为必传属性，不指定或者传入一个空数组时，组件不会被渲染
import image1 from '../images/image1.jpg'
import image2 from '../images/image2.jpg'
import image3 from '../images/image3.jpg'
import image4 from '../images/image4.jpg'
export default {
data () {
return {
images: [image1, image2, image3, image4]
}
}
}
隐藏索引指示器
设置show-indicator为false，隐藏索引指示器，默认为true
自动播放
设置autoplay为true，间隔2秒切换到下一张，默认为false。同时也可以通过指定duration属性控制切换的时间间隔，值为毫秒数，默认3000
禁止循环轮播
默认可以循环轮播，即循环到最后一张时下一张切换到第一张。将loop属性设置为false，可以禁止循环轮播。注意：autoplay为true时，loop值默认为true，仅且只能为true，不要将loop值设置为false，设置了也是没有效果的。
默认显示
默认显示data数组中的第一张图片，可以通过active属性指定初始显示哪张图片。注意：传入的值为图片数组的下标索引，传的值不合法时会抛出异常
事件
click事件，点击图片时触发，回调参数为当前点击的图片的索引。change事件，图片切换后触发，回调参数为当前显示的图片的索引
import image1 from '../images/image1.jpg'
import image2 from '../images/image2.jpg'
import image3 from '../images/image3.jpg'
import image4 from '../images/image4.jpg'
export default {
data () {
return {
images: [image1, image2, image3, image4]
}
},
methods: {
handleClick (index) {
this.$toast({
position: 'bottom',
message: `您点击了第${index + 1}张图片`
})
},
handleChange (currentIndex) {
this.$toast({
position: 'bottom',
message: `当前为第${currentIndex + 1}张图片`,
duration: 1000
})
}
}
}
指定容器的宽高
默认宽度为父容器的100%，高度为200px。可以通过width属性和height属性重新指定。可以传入数值和字符串，默认单位为px。
结合CarouselItem组件使用
适合自定义轮播内容
轮播1
轮播2
轮播3