Carousel

A Slideshow for cycling images in confined spaces

Examples

Base

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Show code

Carousel List

Arrow

Arrow on hover

Drag event

Repeat

Items to Show

Items to List

Show code

HTMLJS

html

<section>
    <o-field grouped>
        <o-field>
            <o-switch v-model="settings.arrow">Arrow</o-switch>
        </o-field>
        <o-field>
            <o-switch
                v-model="settings.arrowHover"
                :disabled="!settings.arrow">
                Arrow on hover
            </o-switch>
        </o-field>
        <o-field>
            <o-switch v-model="settings.hasDrag">Drag event</o-switch>
        </o-field>
        <o-field>
            <o-switch v-model="settings.repeat">Repeat</o-switch>
        </o-field>
    </o-field>
    <o-field grouped>
        <o-field label="Items to Show">
            <o-input
                v-model.number="settings.itemsToShow"
                type="number"
                min="1"
                :max="items.length" />
        </o-field>
        <o-field label="Items to List">
            <o-input
                v-model.number="settings.itemsToList"
                type="number"
                min="1"
                :max="items.length - 1" />
        </o-field>
    </o-field>

    <o-carousel v-model="carousel" v-bind="settings">
        <o-carousel-item v-for="(item, i) in items" :key="i">
            <img :src="item.image" />
        </o-carousel-item>
    </o-carousel>
</section>

html

import { reactive, ref } from "vue";

const carousel = ref(1);

const settings = reactive({
    arrow: true,
    arrowHover: true,
    hasDrag: true,
    itemsToShow: 4,
    itemsToList: 1,
    repeat: false,
});

const items = [
    {
        title: "Slide 1",
        image: "https://picsum.photos/id/1/1230/500",
    },
    {
        title: "Slide 2",
        image: "https://picsum.photos/id/2/1230/500",
    },
    {
        title: "Slide 3",
        image: "https://picsum.photos/id/3/1230/500",
    },
    {
        title: "Slide 4",
        image: "https://picsum.photos/id/4/1230/500",
    },
    {
        title: "Slide 5",
        image: "https://picsum.photos/id/5/1230/500",
    },
    {
        title: "Slide 6",
        image: "https://picsum.photos/id/6/1230/500",
    },
    {
        title: "Slide 7",
        image: "https://picsum.photos/id/7/1230/500",
    },
];

scss

css

Custom Indicators

Show code

HTMLJSSCSS

html

<section>
    <o-carousel
        :autoplay="false"
        :overlay="gallery"
        @click="switchGallery(true)">
        <o-carousel-item v-for="(item, i) in items" :key="i">
            <div class="image">
                <img :src="item.image" />
            </div>
        </o-carousel-item>
        <template #indicators="{ active, switchTo }">
            <o-carousel
                :model-value="active"
                v-bind="settings"
                as-indicator
                @update:model-value="switchTo($event)">
                <o-carousel-item
                    v-for="(item, i) in items"
                    :key="i"
                    item-class="img-indicator"
                    item-active-class="img-indicator-active">
                    <img :src="item.image" />
                </o-carousel-item>
            </o-carousel>
        </template>
        <template #overlay>
            <o-icon
                v-if="gallery"
                icon="times"
                root-class="ex-close-icon"
                clickable
                @click="switchGallery(false)" />
            <div style="color: #ffffff; text-align: center">
                Hello, I'm an overlay!
            </div>
        </template>
    </o-carousel>
</section>

html

import { reactive, ref } from "vue";

const gallery = ref(false);

const settings = reactive({
    itemsToShow: 2,
    breakpoints: {
        768: {
            itemsToShow: 4,
        },
        960: {
            itemsToShow: 6,
        },
    },
});

const items = ref([
    {
        title: "Slide 1",
        image: "https://picsum.photos/id/1/1230/500",
    },
    {
        title: "Slide 2",
        image: "https://picsum.photos/id/2/1230/500",
    },
    {
        title: "Slide 3",
        image: "https://picsum.photos/id/3/1230/500",
    },
    {
        title: "Slide 4",
        image: "https://picsum.photos/id/4/1230/500",
    },
    {
        title: "Slide 5",
        image: "https://picsum.photos/id/5/1230/500",
    },
    {
        title: "Slide 6",
        image: "https://picsum.photos/id/6/1230/500",
    },
    {
        title: "Slide 7",
        image: "https://picsum.photos/id/7/1230/500",
    },
]);

function switchGallery(value) {
    gallery.value = value;

    if (value) document.documentElement.classList.add("o-clipped");
    else document.documentElement.classList.remove("o-clipped");
}

scss

.image img {
    display: block;
    height: auto;
    width: 100%;
}
.img-indicator {
    filter: grayscale(100%);
}
.img-indicator-active {
    filter: grayscale(0%);
}
.ex-close-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #ffffff;
    z-index: 99;
}

Customise

Autoplay

Pause on hover

Drag event

Repeat

Value

Interval

A link that goes to arrow

Show code

HTMLJS

html

<section>
    <o-field grouped>
        <o-field>
            <o-switch v-model="settings.autoplay">Autoplay</o-switch>
        </o-field>
        <o-field>
            <o-switch
                v-model="settings.pauseHover"
                :disabled="!settings.autoplay">
                Pause on hover
            </o-switch>
        </o-field>
        <o-field>
            <o-switch v-model="settings.hasDrag">Drag event</o-switch>
        </o-field>
        <o-field>
            <o-switch
                v-model="settings.repeat"
                :disabled="!settings.autoplay">
                Repeat
            </o-switch>
        </o-field>
    </o-field>
    <o-field grouped>
        <o-field label="Value">
            <o-input
                v-model.number="carousel"
                type="number"
                min="0"
                :max="carousels.length - 1" />
        </o-field>
        <o-field label="Interval">
            <o-input
                v-model.number="settings.interval"
                type="number"
                min="0"
                step="1000"
                :disabled="!settings.autoplay" />
        </o-field>
    </o-field>

    <o-carousel v-model="carousel" v-bind="settings">
        <o-carousel-item v-for="(carousel, i) in carousels" :key="i">
            <section
                class="ex-slide"
                :style="{ 'background-color': carousel.color }">
                <h1>{{ carousel.title }}</h1>
                <o-input :placeholder="carousel.title"></o-input>
                <p>A link that <a href="#arrow">goes to arrow</a></p>
            </section>
        </o-carousel-item>
    </o-carousel>
</section>

html

import { ref, reactive } from "vue";

const carousels = [
    { text: "Slide 1", color: "#445e00" },
    { text: "Slide 2", color: "#006724" },
    { text: "Slide 3", color: "#b60000" },
    { text: "Slide 4", color: "#f4c300" },
    { text: "Slide 5", color: "#005c98" },
];

const carousel = ref(0);

const settings = reactive({
    hasDrag: false,
    autoplay: false,
    pauseHover: false,
    interval: 3000,
    repeat: false,
});

scss

css

Class props

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

How does the Class props inspector work?

Class prop	Description	Props
arrowIconClass	Class of arrow elements.
arrowIconNextClass	Class of next arrow element.
arrowIconPrevClass	Class of prev arrow element.
indicatorItemActiveClass	Class of indicator element when is active.
indicatorItemClass	Class of indicator item element.
indicatorItemStyleClass	Class of indicator element to separate different styles.	`indicatorStyle`
indicatorsClass	Class of indicators element.
indicatorsInsideClass	Class of indicators element when inside.	`indicatorInside`
indicatorsInsidePositionClass	Class of indicators element when inside and position.	`indicatorInside indicatorPosition`
itemActiveClass	Class of carousel item when is active.
itemClass	Class of carousel item.
itemsClass	Class of slider element.
itemsDraggingClass	Class of slider element on drag.
overlayClass	Class of the root element in overlay.	`overlay`
rootClass	Class of the root element.
sceneClass	Class of the wrapper element of carousel items.

Carousel component

html

<o-carousel></o-carousel>

Props

Prop name	Type	Values	Default
arrow	boolean	-	true
arrowHover	boolean	-	true
asIndicator	boolean	-
autoplay	boolean	-	false
breakpoints	object	-	{}
hasDrag	boolean	-	true
iconNext	string	-	From config: `carousel: { iconNext: 'chevron-right' }`
iconPack	string	-
iconPrev	string	-	From config: `carousel: { iconPrev: 'chevron-left' }`
iconSize	string	-
indicator	boolean	-	true
indicatorInside	boolean	-	false
indicatorMode	string	-	'click'
indicatorPosition	string	-	'bottom'
indicatorStyle	string	-	'dots'
interval	number	-	From config: `carousel: { interval: 3500 }`
itemsToList	number	-	1
itemsToShow	number	-	1
modelValue	number	-	0
overlay	boolean	-
override	boolean	-
pauseHover	boolean	-	false
repeat	boolean	-	false

Events

Event name	Properties	Description
update:modelValue
scroll
click

Slots

Name	Description	Bindings
default
arrow
indicators
indicator
overlay

Sass variables

Current theme ➜ Oruga Base

SASS Variable	Default
$carousel-arrow-background	$white
$carousel-arrow-color	$primary
$carousel-arrow-icon-spaced	1.5rem
$carousel-arrow-top	50%
$carousel-arrow-size	1.5rem
$carousel-arrow-border-radius	$base-rounded-border-radius
$carousel-arrow-border	1px solid $carousel-arrow-background
$carousel-arrow-transition	$speed-slow $easing
$carousel-indicators-background	rgba($white, 0.5)
$carousel-indicators-padding	0.5rem
$carousel-indicator-margin	0 0.5rem 0 0
$carousel-indicator-color	$primary
$carousel-indicator-background	$white
$carousel-indicator-border	1px solid $carousel-indicator-color
$carousel-indicator-active-background	$carousel-indicator-color
$carousel-indicator-active-border	1px solid $carousel-indicator-color
$carousel-indicator-transition	$speed-slow $easing
$carousel-indicator-size	10px
$carousel-indicator-dots-border-radius	$base-border-radius
$carousel-indicator-lines-height	5px
$carousel-indicator-lines-width	25px
$carousel-items-transition	all $speed-slower ease-out 0s
$carousel-item-border	2px solid transparent
$carousel-overlay-background	hsla(0, 0%, 4%, 0.86)
$carousel-overlay-zindex	40

See ➜ 📄 Full scss file

Current theme ➜ Oruga Full

SASS Variable	Default
$carousel-arrow-background	$white
$carousel-arrow-color	$primary
$carousel-arrow-icon-spaced	1.5rem
$carousel-arrow-top	50%
$carousel-arrow-size	1.5rem
$carousel-arrow-border-radius	$base-rounded-border-radius
$carousel-arrow-border	1px solid $carousel-arrow-background
$carousel-arrow-transition	$speed-slow $easing
$carousel-indicators-background	rgba($white, 0.5)
$carousel-indicators-padding	0.5rem
$carousel-indicator-margin	0 0.5rem 0 0
$carousel-indicator-color	$primary
$carousel-indicator-background	$white
$carousel-indicator-border	1px solid $carousel-indicator-color
$carousel-indicator-active-background	$carousel-indicator-color
$carousel-indicator-active-border	1px solid $carousel-indicator-color
$carousel-indicator-transition	$speed-slow $easing
$carousel-indicator-size	10px
$carousel-indicator-dots-border-radius	$base-border-radius
$carousel-indicator-lines-height	5px
$carousel-indicator-lines-width	25px
$carousel-items-transition	all $speed-slower ease-out 0s
$carousel-item-border	2px solid transparent
$carousel-overlay-background	hsla(0, 0%, 4%, 0.86)
$carousel-overlay-zindex	40

See ➜ 📄 Full scss file

Current theme ➜ Bulma

The theme does not have any custom variables for this component.

Current theme ➜ Bootstrap

The theme does not have any custom variables for this component.

Carousel ​

Examples ​

Base

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Carousel List

Custom Indicators

Customise

Class props ​

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Class prop

Description

Props

Suffixes

Carousel component ​

Props ​

Events ​

Slots ​

Sass variables ​

Carousel

Examples

Class props

Carousel component

Props

Events

Slots

Sass variables