Carousel

The v-carousel component is used to display large numbers of visual content on a rotating timer.

Basic

The v-carousel component expands upon v-window by providing additional features targeted at displaying images.

Custom delimiters

Use any available icon as your carousel’s slide delimiter.

Cycle

With the cycle prop you can have your slides automatically transition to the next available every 6s (default).

Hide controls

You can hide the carousel navigation controls with :show-arrows="false". Or you can make them only appear on hover with show-arrows="hover".

Customized arrows

Arrows can be customized by using prev and next slots.

Hide delimiters

You can hide the bottom controls with hide-delimiters prop.

Progress

You can show a linear progress bar with the progress prop. It will indicate how far into the cycle the carousel currently is.

Continuous

The continuous="false" prop is disabled carousel looping.

Direction

The direction prop is use for change carousel direction, there are two option horizontal and vertical.

CONTENTS

  • Introduction

  • Basic

  • Custom Delimiter

  • Cycle

  • Hide controls

  • Customized arrows

  • Hide delimiters

  • Progress

  • Continuous

  • Direction