Carousel 图片轮播

旋转木马，一组轮播的区域。

何时使用

• 当有一组平级的内容。
• 当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。
• 常用于一组图片或卡片轮播。

示例

基本使用：

常规



无箭头



指示点位置



自动切换

<template>
  常规
  <br />
  <br />
  <f-carousel :after-change="onChange">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </f-carousel>
  <br />
  <br />
  无箭头
  <br />
  <br />
  <f-carousel :arrows="false" :after-change="onChange">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </f-carousel>
  <br />
  <br />
  指示点位置
  <br />
  <br />
  <f-carousel :arrows="false" dot-position="left">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </f-carousel>
  <br />
  <br />
  自动切换
  <br />
  <br />
  <f-carousel autoplay :arrows="false">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </f-carousel>
</template>
<script lang="ts" setup>
const onChange = (current: number) => {
  console.log(current)
}
</script>
<style scoped>
/* For demo */
.fs-carousel :deep(.slick-slide) {
  text-align: center;
  height: 160px;
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
}

.fs-carousel :deep(.slick-slide) {
  color: #fff;
}
</style>

API

参数	说明	类型	默认值	版本
autoplay	是否自动切换	boolean	false
arrows(新)	是否左右箭头	boolean	true
dotPosition	面板指示点位置，可选 top bottom left right	string	bottom	1.5.0
dots	是否显示面板指示点	boolean	true
dotsClass	面板指示点类名	string	slick-dots
easing	动画效果	string	linear
effect	动画效果函数	scrollx | fade	scrollx
afterChange	切换面板的回调	function(current)	-
beforeChange	切换面板的回调	function(from, to)	-

注意

• 此组件支持arrows属性
• #prevArrow,#nextArrow,#customPaging等插槽,源码中有实现，官方文档中未写

方法

名称	描述	版本
goTo(slideNumber, dontAnimate)	切换到指定面板, dontAnimate = true 时，不使用动画
next()	切换到下一面板
prev()	切换到上一面板

更多属性可参考源码：carousel props