Carousel

A Slideshow for cycling images in confined spaces

---

edit on github

Examples

Base

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

<script>
  export default {
    data() {
      return {
        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' }
        ]
      }
    }
  }
</script>

Carousel List

<template>
  <section>
    <div class="example-component">
      <o-field grouped group-multiline>
        <div class="control">
          <o-switch v-model="arrow">Arrow</o-switch>
        </div>
        <div class="control">
          <o-switch v-model="arrowHover" :disabled="!arrow">Arrow on hover</o-switch>
        </div>
        <div class="control">
          <o-switch v-model="drag">Drag event</o-switch>
        </div>
        <div class="control">
          <o-switch v-model="repeat">Repeat</o-switch>
        </div>
      </o-field>
      <o-field grouped group-multiline>
        <o-field label="Items to Show">
          <o-input type="number" v-model.number="perList" min="1" :max="items.length" />
        </o-field>
        <o-field label="Items to List">
          <o-input type="number" v-model.number="increment" min="1" :max="items.length - 1" />
        </o-field>
      </o-field>
    </div>
    <o-carousel v-model="values" :arrow="arrow" :arrow-hover="arrowHover" :items-to-show="perList" :items-to-list="increment" :repeat="repeat" :has-drag="drag">
      <o-carousel-item v-for="(item, i) in items" :key="i">
        <img :src="item.image" />
      </o-carousel-item>
    </o-carousel>
  </section>
</template>

<script>
  export default {
    data() {
      return {
        arrow: true,
        arrowHover: true,
        drag: true,
        values: 1,
        perList: 4,
        increment: 1,
        repeat: false,
        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'
          }
        ]
      }
    }
  }
</script>

Custom As indicators

<template>
  <o-carousel :autoplay="false" :overlay="gallery" @click="switchGallery(true)">
    <o-carousel-item v-for="(item, i) in items" :key="i">
      <a class="image">
        <img :src="item.image" />
      </a>
    </o-carousel-item>

    <template #indicators="{ active, switchTo }">
      <o-carousel :value="active" @input="switchTo($event)" v-bind="al" as-indicator>
        <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.native="switchGallery(false)" />
      <div style="color: #ffffff; text-align: center">
        Hello, I'm an overlay!
      </div>
    </template>
  </o-carousel>
</template>

<script>
  export default {
    data() {
      return {
        gallery: false,
        al: {
          itemsToShow: 2,
          breakpoints: {
            768: {
              itemsToShow: 4
            },
            960: {
              itemsToShow: 6
            }
          }
        },
        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'
          }
        ]
      }
    },
    methods: {
      switchGallery(value) {
        this.gallery = value
        if (value) {
          document.documentElement.classList.add('o-clipped')
        } else {
          document.documentElement.classList.remove('o-clipped')
        }
      }
    }
  }
</script>

<style>
  .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;
  }
</style>

Custom

<template>
  <section>
    <div class="example-component">
      <o-field grouped group-multiline>
        <div class="control">
          <o-switch v-model="autoPlay">Autoplay</o-switch>
        </div>
        <div class="control">
          <o-switch v-model="pauseHover" :disabled="!autoPlay">Pause on hover</o-switch>
        </div>
        <div class="control">
          <o-switch v-model="drag">Drag event</o-switch>
        </div>
        <div class="control">
          <o-switch v-model="repeat" :disabled="!autoPlay">Repeat</o-switch>
        </div>
      </o-field>
      <o-field grouped group-multiline>
        <o-field label="Value">
          <o-input type="number" v-model.number="carousel" min="0" :max="carousels.length - 1" />
        </o-field>
        <o-field label="Interval">
          <o-input type="number" v-model.number="interval" min="0" step="1000" :disabled="!autoPlay" />
        </o-field>
      </o-field>
    </div>

    <o-carousel v-model="carousel" :has-drag="drag" :autoplay="autoPlay" :pause-hover="pauseHover" :interval="interval" :repeat="repeat">
      <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>
</template>

<script>
  export default {
    data() {
      return {
        carousel: 0,
        animated: 'slide',
        drag: false,
        autoPlay: false,
        pauseHover: false,
        pauseInfo: false,
        repeat: false,
        interval: 3000,
        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' }
        ]
      }
    }
  }
</script>

Class props

📄 Full scss file

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

How does Class props inspector work?

Class props inspector is useful to see class props you want to use to customize Oruga components and how they change a component. You can click on Inspect button to find the exact element where a specific class prop acts.

In the Class props inspector there are other columns

Class prop

This column contains the name of the Class prop you want to inspect.
If you find a name with a link (▷ classPropName) this refers to a subitem (e.g. Dropdown Item in Dropdown).

Description

This column contains the description of the Class prop you want to inspect.
👉 This icon indicates some warning, e.g. this Class prop is visible only on mobile.
🔍 This icon indicates that you should pay attention to CSS specificity. See "Deal with specificity" section in the documentation.

Props

This column contains a list of props that activate the class, e.g. if a class prop contains disabled prop it means that only when the component has disabled prop.

Suffixes

This column contains all the possible suffixes that you'll receive if you use a function to customize your Class prop. You'll find more info in the "Overriding section".

Class prop	Description	Props	Suffixes
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.

Props

Prop name	Description	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
overlay		boolean	-
override	Override classes	boolean	-	false
pauseHover		boolean	-	false
repeat		boolean	-	false
value		number	-	0

Events

Event name	Properties	Description
scroll
input

Slots

Name	Description	Bindings
default
arrow
indicators
indicator
overlay

Style

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