Carousel

A Slideshow for cycling images in confined spaces

Examples

Base

Show code

HTML

<section>
    <o-carousel>
        <o-carousel-item v-for="(carousel, i) in carousels" :key="i">
            <article
                class="ex-slide"
                :style="{ 'background-color': carousel.color }">
                <h1>{{ carousel.text }}</h1>
            </article>
        </o-carousel-item>
    </o-carousel>
</section>

JS

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" },
];

Carousel List

Show code

HTML

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

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

JS

import { reactive, ref } from "vue";

const carousel = ref(1);

const settings = reactive({
    arrows: true,
    arrowsHover: true,
    dragable: 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",
    },
];

Custom Indicators

Show code

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"
                @update:model-value="switchTo($event)">
                <o-carousel-item
                    v-for="(item, i) in items"
                    :key="i"
                    clickable
                    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>

JS

import { reactive, ref } from "vue";

const gallery = ref(false);

const settings = reactive({
    indicators: false,
    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

Show code

HTML

<section>
    <o-field grouped>
        <o-field>
            <o-switch v-model="settings.autoplay" label="Autoplay" />
        </o-field>
        <o-field>
            <o-switch
                v-model="settings.pauseHover"
                :disabled="!settings.autoplay"
                label="Pause on hover" />
        </o-field>
        <o-field>
            <o-switch v-model="settings.dragable" label="Drag event" />
        </o-field>
        <o-field>
            <o-switch
                v-model="settings.repeat"
                :disabled="!settings.autoplay"
                label="Repeat" />
        </o-field>
    </o-field>
    <o-field grouped>
        <o-field label="Value">
            <o-input
                v-model="carousel"
                type="number"
                min="0"
                :max="carousels.length - 1" />
        </o-field>
        <o-field label="Interval">
            <o-input
                v-model="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="(slide, i) in carousels" :key="i">
            <section
                class="ex-slide"
                :style="{ 'background-color': slide.color }">
                <h1>{{ slide.text }}</h1>
                <o-input :placeholder="slide.text" />
                <p>A link that <a href="#arrow">goes to arrow</a></p>
            </section>
        </o-carousel-item>
    </o-carousel>
</section>

JS

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({
    dragable: false,
    autoplay: false,
    pauseHover: false,
    interval: 3000,
    repeat: false,
});

Class props

'Classes applied to the element'

Carousel component

A Slideshow for cycling images in confined spaces

<o-carousel></o-carousel>

Props

Prop name	Description	Type	Values	Default
arrows	Show next / prev arrows	boolean	-	From config: carousel: {   arrows: true }
arrowsHover	Show next / prev arrows only on hover	boolean	-	From config: carousel: {   arrowsHover: true }
autoplay	Move item automaticalls after interval	boolean	-	false
breakpoints	Define these props for different screen sizes	Record<number, any>	-	Default function (see source code)
dragable	Enable drag mode	boolean	-	true
iconNext	Icon name for next icon	string	-	From config: carousel: {   iconNext: "chevron-right" }
iconPack	Icon pack to use	string	mdi, fa, fas and any other custom icon pack	From config: carousel: {   iconPack: undefined }
iconPrev	Icon name for previous icon	string	-	From config: carousel: {   iconPrev: "chevron-left" }
iconSize	Icon size	string	small, medium, large	From config: carousel: {   iconSize: undefined }
indicatorInside	Place indicators inside the carousel	boolean	-	false
indicatorMode	Indicator interaction mode	string	click, hover	"click"
indicatorPosition	Position of the indicator - depends on used theme	string	-	From config: carousel: {   indicatorPosition: "bottom" }
indicatorStyle	Style of the indicator - depends on used theme	string	-	From config: carousel: {   indicatorStyle: "dots" }
indicators	Enable indicators	boolean	-	true
interval	Timer interval for autoplay	number	-	From config: carousel: {   interval: 3500 }
itemsToList	Number of items to switch at once	number	-	From config: carousel: {   itemsToList: 1 }
itemsToShow	Number of items to show at once	number	-	From config: carousel: {   itemsToShow: 1 }
v-model	The index of the current active element	number	-	0
overlay	Show an overlay	boolean	-	false
override	Override existing theme classes completely	boolean	-
pauseHover	Pause autoplay on hover	boolean	-	false
repeat	Repeat from the beginning after reaching the end	boolean	-	false

Events

Event name	Properties	Description
update:modelValue	value number - updated modelValue prop	modelValue prop two-way binding
scroll	value number - scroll index	on carousel scroll event
click	event event - native event	on item click event

Slots

Name	Description	Bindings
default	Display carousel item
arrow	Override the arrows	has-prev boolean - has prev arrow button prev (): void - switch to prev item function has-next boolean - has next arrow button next (): void - switch to next item function
indicators	Override the indicators	active number - active index switch-to (idx: number): void - switch to item function indicator-index number - current indicator index
indicator	Override the indicator elements	index index - indicator index
overlay	Overlay element

CarouselItem component

A Slideshow item used by the carousel

<o-carousel-item></o-carousel-item>

Props

Prop name	Description	Type	Values	Default
ariaRole	Role attribute to be passed to the div wrapper for better accessibility	string	-	From config: carousel: {   ariaRole: "option" }
clickable	Make item clickable	boolean	-	false
override	Override existing theme classes completely	boolean	-

Slots

Name	Description	Bindings
default	Default content

Sass variables

Current theme ➜ Oruga

SASS Variable	Default
$carousel-arrow-background	var(--#{$prefix}white)
$carousel-arrow-color	var(--#{$prefix}primary)
$carousel-arrow-icon-spaced	1.5rem
$carousel-arrow-top	50%
$carousel-arrow-size	1.5rem
$carousel-arrow-border-radius	var( --#{$prefix}base-border-radius-rounded)
$carousel-arrow-border	1px solid $carousel-arrow-background
$carousel-arrow-transition	var(--#{$prefix}transition-duration) var(--#{$prefix}transition-timing)
$carousel-indicators-background	rgba(var(--#{$prefix}white), 0.5)
$carousel-indicators-padding	0.5rem
$carousel-indicator-margin	0 0.5rem 0 0
$carousel-indicator-color	var(--#{$prefix}primary)
$carousel-indicator-background	var(--#{$prefix}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	var(--#{$prefix}transition-duration) var(--#{$prefix}transition-timing)
$carousel-indicator-size	10px
$carousel-indicator-dots-border-radius	var( --#{$prefix}base-border-radius)
$carousel-indicator-lines-height	5px
$carousel-indicator-lines-width	25px
$carousel-items-transition	all var(--#{$prefix}transition-duration) var(--#{$prefix}transition-timing) 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

SASS Variable	Default
$carousel-arrow-background	css.getVar("scheme-main")
$carousel-arrow-color	css.getVar("primary")
$carousel-arrow-icon-spaced	1.5rem
$carousel-arrow-top	50%
$carousel-indicator-background	rgba(css.getVar("scheme-invert"), 0.5)
$carousel-indicator-border	css.getVar("scheme-main")
$carousel-indicator-color	css.getVar("primary")
$carousel-indicator-spaced	0.5rem
$carousel-overlay-background	rgba(css.getVar("scheme-invert"), 0.86)
$carousel-overlay-z	40

See ➜ 📄 Full scss file

Current theme ➜ Bootstrap

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