Carousel

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

Example


Intervalms
<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 setup>
import { reactive, ref } from 'vue';
import { Carousel, Slide, Btn } from 'uiv';

const interval = ref(5000);
const indicators = ref(true);
const controls = ref(true);
const slides = reactive([
  { title: 'Slide 1' },
  { title: 'Slide 2' },
  { title: 'Slide 3' },
  { title: 'Slide 4' },
]);

function pushSlide() {
  slides.push({ title: `Slide ${slides.length + 1}` });
}
</script>

Override indicators

Use the indicators slot to override default Bootstrap indicators.

<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 #indicators="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 setup>
import { reactive } from 'vue';
import { Carousel, Slide } from 'uiv';

const slides = reactive([
  { title: 'Slide 1' },
  { title: 'Slide 2' },
  { title: 'Slide 3' },
  { title: 'Slide 4' },
]);
</script>

<style>
.uiv .custom-carousel-indicators li,
.uiv .custom-carousel-indicators li.active {
  width: 50px !important;
  height: 8px !important;
  margin: 0 3px !important;
  border-radius: 0 !important;
}
</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.

<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 setup>
import { reactive } from 'vue';
import { Carousel, Slide } from 'uiv';

const slides = reactive([
  { title: 'Slide 1' },
  { title: 'Slide 2' },
  { title: 'Slide 3' },
  { title: 'Slide 4' },
]);
</script>

<style>
/* Using custom icons may require some additional CSS declarations */
.uiv .carousel-control .my-icon {
  position: absolute;
  top: 50%;
  margin-top: -10px;
}
</style>

API Reference

Props

NameTypeDefaultRequiredDescription
v-modelNumberThe current slide index, use this to manual change slide index.
indicatorsBooleantrueShow / hide the indicators.
controlsBooleantrueShow / hide the controls.
intervalNumber5000Slides running interval time in ms. Use 0 to stop interval.
icon-control-leftStringglyphicon glyphicon-chevron-leftThe left control icon font class.
icon-control-rightStringglyphicon glyphicon-chevron-rightThe right control icon font class.

Slots

NameDescription
defaultThe carousel body.
indicatorsOverride indicators. This is a scoped slot with activeIndex prop and select method. See example section above for usage details.

Events

NameParamsDescription
changeindexFire after slide changed, with the index number changed to.