# Carousel

A Slideshow for cycling images in confined spaces


edit on github

# Examples

# Base

# Custom As indicators

# Custom

# Class props

📄 Full scss file


Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

How does Class props inspector work?
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