carousel Carousel

Carousel component, used for scrolling display of images etc.

Basic Usage

Simply insert content using the default slot.

1

2

3

4

<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>

Auto Switch and Speed

Can set autoplay for auto switching, and trigger="hover" for hover switching

1

2

3

4

<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>

Indicator Style and Position

1

2

3

4

1

2

3

4

<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 Style

Can set card for card style

1

2

3

4

<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

Can set direction to vertical

1

2

3

4

<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

Parameter	Description	Type	Options	Default
initial-index	Index of the carousel, starting from 0	Number	—	0
height	Carousel height, can be auto or a specific pixel value	String / Number	—	200px
loop	Enable looping	Boolean	—	false
autoplay	Whether to auto switch	Boolean	—	false
interval	Auto switch interval, in milliseconds	Number	—	3000
indicator-position	Position of indicators	String	inside, outside, none	inside
trigger	Trigger mode	String	click, hover	click
arrow	When to show switch arrows	String	hover, always, never	hover
direction	Direction	String	horizontal, vertical	horizontal
type	Type	String	card	—

Events

Event Name	Description	Return Value
change	Triggers when carousel switches, returns the currently active index and the original index	oldValue, value