BIN-UI-DESIGN

Appearance

On this page

轮播 Carousel ​

轮播组件，用于滚动显示图片等

基础用法 ​

直接用组件默认插槽插入即可

<template>
  <b-carousel loop trigger="click">
    <b-carousel-item>
      <div class="demo-carousel-panel">1</div>
    </b-carousel-item>
    <b-carousel-item>
      <div class="demo-carousel-panel">2</div>
    </b-carousel-item>
    <b-carousel-item>
      <div class="demo-carousel-panel">3</div>
    </b-carousel-item>
    <b-carousel-item>
      <div class="demo-carousel-panel">4</div>
    </b-carousel-item>
  </b-carousel>
</template>

<style scoped>
.demo-carousel-panel {
  height: 200px;
  line-height: 200px;
  text-align: center;
  color: #fff;
  font-size: 20px;
  background: #99a9bf;
}
</style>
<template>
  <b-carousel loop trigger="click">
    <b-carousel-item>
      <div class="demo-carousel-panel">1</div>
    </b-carousel-item>
    <b-carousel-item>
      <div class="demo-carousel-panel">2</div>
    </b-carousel-item>
    <b-carousel-item>
      <div class="demo-carousel-panel">3</div>
    </b-carousel-item>
    <b-carousel-item>
      <div class="demo-carousel-panel">4</div>
    </b-carousel-item>
  </b-carousel>
</template>

<style scoped>
.demo-carousel-panel {
  height: 200px;
  line-height: 200px;
  text-align: center;
  color: #fff;
  font-size: 20px;
  background: #99a9bf;
}
</style>

自动切换和速度 ​

可以设置autoplay自动切换，trigger="hover"悬停切换

<template>
  <b-carousel autoplay :interval="2000" :initial-index="value" loop>
    <b-carousel-item>
      <div class="demo-carousel-panel">1</div>
    </b-carousel-item>
    <b-carousel-item>
      <div class="demo-carousel-panel">2</div>
    </b-carousel-item>
    <b-carousel-item>
      <div class="demo-carousel-panel">3</div>
    </b-carousel-item>
    <b-carousel-item>
      <div class="demo-carousel-panel">4</div>
    </b-carousel-item>
  </b-carousel>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const value = ref(1)
</script>

<style scoped>
.demo-carousel-panel {
  height: 200px;
  line-height: 200px;
  text-align: center;
  color: #fff;
  font-size: 20px;
  background: #99a9bf;
}
</style>
<template>
  <b-carousel autoplay :interval="2000" :initial-index="value" loop>
    <b-carousel-item>
      <div class="demo-carousel-panel">1</div>
    </b-carousel-item>
    <b-carousel-item>
      <div class="demo-carousel-panel">2</div>
    </b-carousel-item>
    <b-carousel-item>
      <div class="demo-carousel-panel">3</div>
    </b-carousel-item>
    <b-carousel-item>
      <div class="demo-carousel-panel">4</div>
    </b-carousel-item>
  </b-carousel>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const value = ref(1)
</script>

<style scoped>
.demo-carousel-panel {
  height: 200px;
  line-height: 200px;
  text-align: center;
  color: #fff;
  font-size: 20px;
  background: #99a9bf;
}
</style>

指示器样式和位置 ​

<template>
  <div>
    <b-carousel indicator-position="inside" arrow="always" trigger="hover" loop>
      <b-carousel-item>
        <div class="demo-carousel-panel">1</div>
      </b-carousel-item>
      <b-carousel-item>
        <div class="demo-carousel-panel">2</div>
      </b-carousel-item>
      <b-carousel-item>
        <div class="demo-carousel-panel">3</div>
      </b-carousel-item>
      <b-carousel-item>
        <div class="demo-carousel-panel">4</div>
      </b-carousel-item>
    </b-carousel>
    <b-divider></b-divider>
    <b-carousel indicator-position="outside" loop>
      <b-carousel-item>
        <div class="demo-carousel-panel">1</div>
      </b-carousel-item>
      <b-carousel-item>
        <div class="demo-carousel-panel">2</div>
      </b-carousel-item>
      <b-carousel-item>
        <div class="demo-carousel-panel">3</div>
      </b-carousel-item>
      <b-carousel-item>
        <div class="demo-carousel-panel">4</div>
      </b-carousel-item>
    </b-carousel>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped>
.demo-carousel-panel {
  height: 200px;
  line-height: 200px;
  text-align: center;
  color: #fff;
  font-size: 20px;
  background: #99a9bf;
}
</style>
<template>
  <div>
    <b-carousel indicator-position="inside" arrow="always" trigger="hover" loop>
      <b-carousel-item>
        <div class="demo-carousel-panel">1</div>
      </b-carousel-item>
      <b-carousel-item>
        <div class="demo-carousel-panel">2</div>
      </b-carousel-item>
      <b-carousel-item>
        <div class="demo-carousel-panel">3</div>
      </b-carousel-item>
      <b-carousel-item>
        <div class="demo-carousel-panel">4</div>
      </b-carousel-item>
    </b-carousel>
    <b-divider></b-divider>
    <b-carousel indicator-position="outside" loop>
      <b-carousel-item>
        <div class="demo-carousel-panel">1</div>
      </b-carousel-item>
      <b-carousel-item>
        <div class="demo-carousel-panel">2</div>
      </b-carousel-item>
      <b-carousel-item>
        <div class="demo-carousel-panel">3</div>
      </b-carousel-item>
      <b-carousel-item>
        <div class="demo-carousel-panel">4</div>
      </b-carousel-item>
    </b-carousel>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped>
.demo-carousel-panel {
  height: 200px;
  line-height: 200px;
  text-align: center;
  color: #fff;
  font-size: 20px;
  background: #99a9bf;
}
</style>

卡片风格 ​

可以设置card卡片风格

<template>
  <b-carousel :interval="4000" type="card" height="200px" loop>
    <b-carousel-item>
      <div class="demo-carousel-panel">1</div>
    </b-carousel-item>
    <b-carousel-item>
      <div class="demo-carousel-panel">2</div>
    </b-carousel-item>
    <b-carousel-item>
      <div class="demo-carousel-panel">3</div>
    </b-carousel-item>
    <b-carousel-item>
      <div class="demo-carousel-panel">4</div>
    </b-carousel-item>
  </b-carousel>
</template>

<script setup lang="ts"></script>

<style scoped>
.demo-carousel-panel {
  height: 200px;
  line-height: 200px;
  text-align: center;
  color: #fff;
  font-size: 20px;
  background: #99a9bf;
}
</style>
<template>
  <b-carousel :interval="4000" type="card" height="200px" loop>
    <b-carousel-item>
      <div class="demo-carousel-panel">1</div>
    </b-carousel-item>
    <b-carousel-item>
      <div class="demo-carousel-panel">2</div>
    </b-carousel-item>
    <b-carousel-item>
      <div class="demo-carousel-panel">3</div>
    </b-carousel-item>
    <b-carousel-item>
      <div class="demo-carousel-panel">4</div>
    </b-carousel-item>
  </b-carousel>
</template>

<script setup lang="ts"></script>

<style scoped>
.demo-carousel-panel {
  height: 200px;
  line-height: 200px;
  text-align: center;
  color: #fff;
  font-size: 20px;
  background: #99a9bf;
}
</style>

方向 ​

可以设置direction方向为竖直方向

<template>
  <b-carousel height="200px" direction="vertical" :autoplay="false">
    <b-carousel-item>
      <div class="demo-carousel-panel">1</div>
    </b-carousel-item>
    <b-carousel-item>
      <div class="demo-carousel-panel">2</div>
    </b-carousel-item>
    <b-carousel-item>
      <div class="demo-carousel-panel">3</div>
    </b-carousel-item>
    <b-carousel-item>
      <div class="demo-carousel-panel">4</div>
    </b-carousel-item>
  </b-carousel>
</template>

<script setup lang="ts"></script>

<style scoped>
.demo-carousel-panel {
  height: 200px;
  line-height: 200px;
  text-align: center;
  color: #fff;
  font-size: 20px;
  background: #99a9bf;
}
</style>
<template>
  <b-carousel height="200px" direction="vertical" :autoplay="false">
    <b-carousel-item>
      <div class="demo-carousel-panel">1</div>
    </b-carousel-item>
    <b-carousel-item>
      <div class="demo-carousel-panel">2</div>
    </b-carousel-item>
    <b-carousel-item>
      <div class="demo-carousel-panel">3</div>
    </b-carousel-item>
    <b-carousel-item>
      <div class="demo-carousel-panel">4</div>
    </b-carousel-item>
  </b-carousel>
</template>

<script setup lang="ts"></script>

<style scoped>
.demo-carousel-panel {
  height: 200px;
  line-height: 200px;
  text-align: center;
  color: #fff;
  font-size: 20px;
  background: #99a9bf;
}
</style>

Props ​

参数说明类型可选值默认值
initial-index轮播的索引，从 0 开始，Number—0
height走马灯的高度，可填 auto 或具体高度数值，单位 pxString / Number—200px
loop是否开启循环Boolean—false
autoplay是否自动切换Boolean—false
interval自动切换的时间间隔，单位为毫秒Number—3000
indicator-position指示器的位置Stringinside （内部），outside（外部），none（不显示）inside
trigger触发方式Stringclick，hoverclick
arrow切换箭头的显示时机Stringhover，always，neverhover
direction方向Stringhorizontal、verticalhorizontal
type类型Stringcard—

Events ​

事件名说明返回值
change轮播切换时触发，目前激活的索引，原的索引oldValue, value

MIT Licensed | Copyright © 2023-present bin-ui-design