vue-carousel/docs/source/examples/index.md

A flexible, responsive, touch-friendly carousel for Vue.js

---
title: Examples
---

## Basic

No options configured, 10 slides added to the carousel.

<script async src="//jsfiddle.net/toddlawton/2bxwyg8g/embed/result,js/"></script>

## Responsive

Configured breakpoints: 2 slides on mobile (<= 480px), 3 slides on tablet (<= 768).
**Note: in a JSFiddle iframe, the breakpoint is determined by the iframe's width.**

<script async src="//jsfiddle.net/quinnssense/bojn4dz4/embed/js,result/"></script>

## Scroll per page

Instead of scrolling on a per item basis, the carousel will scroll the configured [perPage](/vue-carousel/api#perPage) with each movement.

<script async src="//jsfiddle.net/toddlawton/6ckc1pqv/embed/result,js/"></script>

## Scroll per page (custom)

Instead of scrolling on a per item basis, the carousel will scroll the configured by [perPageCustom](/vue-carousel/api#perPageCustom) with each movement.

<script async src="//jsfiddle.net/quinnssense/gjr7wbph/1/embed/"></script></script>

## Autoplay

The carousel will auto-advance slides unless the carousel is hovered upon.

<script async src="//jsfiddle.net/toddlawton/n1argwgg/embed/result,js/"></script>

## Autoplay infinite loop

The carousel will auto-play and loop when reaching the end.

<script async src="//jsfiddle.net/kpkrmx2k/3/embed/result,js/"></script>

## Navigation

Buttons added to advance the carousel in either direction.

<script async src="//jsfiddle.net/toddlawton/46wegz8a/embed/result,js/"></script>

## Customized

Customized pagination dot colors and sizes. Customized speed and easing.

<script async src="//jsfiddle.net/toddlawton/ycp9bwhp/embed/result,js/"></script>

<style type="text/css">iframe { max-height: 230px; }</style>