Carousel 轮播

A slideshow component for cycling through elements, like a carousel. Nested carousels are not supported.

Example

This is Slide 1

This is Slide 2

This is Slide 3

This is Slide 4

Previous Next

Interval ms

<template>
  <section class="uiv">
    <carousel
      ref="carousel"
      :indicators="indicators"
      :controls="controls"
      :interval="interval"
    >
      <slide v-for="(slide, index) in slides" :key="index">
        <div
          style="width: 100%; height: 400px"
          :style="{ background: index % 2 === 0 ? '#99a9bf' : '#d3dce6' }"
        ></div>
        <div class="carousel-caption">
          <h3>This is {{ slide.title }}</h3>
        </div>
      </slide>
    </carousel>
    <br />
    <form class="form-inline">
      <btn @click="indicators = !indicators">Toggle Indicators</btn>
      <btn @click="controls = !controls">Toggle Controls</btn>
      <btn @click="pushSlide">Push Slide</btn>
      <div class="form-group">
        <div class="input-group">
          <span class="input-group-addon">Interval</span>
          <input
            v-model.number="interval"
            type="number"
            class="form-control"
            step="1"
            min="0"
            style="width: 100px"
          />
          <span class="input-group-addon">ms</span>
        </div>
      </div>
    </form>
  </section>
</template>
<script>
export default {
  data() {
    return {
      interval: 5000,
      indicators: true,
      controls: true,
      slides: [
        { title: 'Slide 1' },
        { title: 'Slide 2' },
        { title: 'Slide 3' },
        { title: 'Slide 4' },
      ],
    }
  },
  methods: {
    pushSlide() {
      this.slides.push({ title: `Slide ${this.slides.length + 1}` })
    },
  },
}
</script>

Override indicators

Use the indicators slot to override default Bootstrap indicators.

This is a scoped slot, use slot-scope="props" in Vue 2.5+, otherwise scope="props".

This is Slide 1

This is Slide 2

This is Slide 3

This is Slide 4

Previous Next

<template>
  <div class="uiv">
    <carousel>
      <slide v-for="(slide, index) in slides" :key="index">
        <div
          style="width: 100%; height: 400px"
          :style="{ background: index % 2 === 0 ? '#99a9bf' : '#d3dce6' }"
        ></div>
        <div class="carousel-caption">
          <h3>This is {{ slide.title }}</h3>
        </div>
      </slide>
      <!-- Use this slot for custom indicators -->
      <template slot="indicators" slot-scope="props">
        <ol class="carousel-indicators custom-carousel-indicators">
          <li
            v-for="(slide, index) in slides"
            :key="index"
            :class="{ active: index === props.activeIndex }"
            @click="props.select(index)"
          >
            <!-- Anything you like here -->
          </li>
        </ol>
      </template>
    </carousel>
  </div>
</template>
<script>
export default {
  data() {
    return {
      slides: [
        { title: 'Slide 1' },
        { title: 'Slide 2' },
        { title: 'Slide 3' },
        { title: 'Slide 4' },
      ],
    }
  },
}
</script>
<style scoped>
.custom-carousel-indicators li,
.custom-carousel-indicators li.active {
  width: 50px;
  height: 8px;
  margin: 0 3px;
  border-radius: 0;
}
</style>

Custom icons

Bootstrap 3 has 2 sets of icon supported for the carousel at present:

• glyphicon glyphicon-chevron-left and glyphicon glyphicon-chevron-right (default)
• icon-prev and icon-next

Additional CSS may needed if you prefer other icons or font.

Here is an example using glyphicon-arrow-left and glyphicon-arrow-right.

This is Slide 1

This is Slide 2

This is Slide 3

This is Slide 4

Previous Next

<template>
  <div class="uiv">
    <carousel
      icon-control-left="my-icon glyphicon glyphicon-arrow-left"
      icon-control-right="my-icon glyphicon glyphicon-arrow-right"
    >
      <slide v-for="(slide, index) in slides" :key="index">
        <div
          style="width: 100%; height: 400px"
          :style="{ background: index % 2 === 0 ? '#99a9bf' : '#d3dce6' }"
        ></div>
        <div class="carousel-caption">
          <h3>This is {{ slide.title }}</h3>
        </div>
      </slide>
    </carousel>
  </div>
</template>
<script>
export default {
  data() {
    return {
      slides: [
        { title: 'Slide 1' },
        { title: 'Slide 2' },
        { title: 'Slide 3' },
        { title: 'Slide 4' },
      ],
    }
  },
}
</script>
<style>
/* Using custom icons may require some additional CSS declarations */
.carousel-control .my-icon {
  position: absolute;
  top: 50%;
  margin-top: -10px;
}
</style>

API Reference

Carousel (opens new window)

Props

Name	Type	Default	Required	Description
v-model	Number			The current slide index, use this to manual change slide index.
indicators	Boolean	true		Show / hide the indicators.
controls	Boolean	true		Show / hide the controls.
interval	Number	5000		Slides running interval time in ms. Use 0 to stop interval.
icon-control-left	String	glyphicon glyphicon-chevron-left		The left control icon font class.
icon-control-right	String	glyphicon glyphicon-chevron-right		The right control icon font class.

Slots

Name	Description
default	The carousel body.
indicators	Override indicators. This is a scoped slot with activeIndex prop and select method. See example section above for usage details.

Events

Name	Params	Description
change	index	Fire after slide changed, with the index number changed to.