Carousel Component

A flexible, accessible, and customizable carousel component.

Basic Usage

Vue

<script setup lang="ts">
  import { HLCarousel } from '@platform-ui/highrise'
  const items = [
    {
      key: 1,
      src: 'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel1.jpeg',
    },
    {
      key: 1,
      src: 'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel2.jpeg',
    },
    {
      key: 3,
      src: 'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel3.jpeg',
    },
  ]
</script>

<template>
  <HLCarousel :carouselItems="items" :showArrow="true" id="carousel-1" />
</template>

Fade

Vue

<template>
  <HLCarousel :carouselItems="items" :showArrow="true" id="carousel-1" effect="fade" />
</template>

Slide

Vue

<template>
  <HLCarousel :carouselItems="items" :showArrow="true" id="carousel-1" effect="slide" />
</template>

Card

Vue

<template>
  <HLCarousel :carouselItems="items" :showArrow="true" id="carousel-1" effect="card" />
</template>

Mousewheel

Vue

<template>
  <HLCarousel :carouselItems="items" :showArrow="true" id="carousel-1" effect="slide" mousewheel />
</template>

Custom Transition

SCSS

.creative-enter-from,
.creative-leave-to {
  opacity: 0;
  transform: scale(0.8);
}

.creative-enter-active,
.creative-leave-active {
  transition: all 0.3s ease;
}

Vue

<template>
  <HLCarousel :carouselItems="items" :showArrow="true" id="carousel-1" effect="custom" :transitionProps="{ name: 'creative' }" />
</template>

Controlled Usage

Vue

<template>
  <HLCarousel
    :carouselItems="items"
    :showArrow="true"
    id="carousel-1"
    :currentIndex="currentIndex"
    show-dots
    @update:index="onUpdatedIndex"
  />
</template>

ts

const currentIndex = ref(1)

const onUpdatedIndex = (index: number) => {
  currentIndex.value = index
}

Different Size, Color and Direction

Vue

<template>
  <HLCarousel
    :carouselItems="items"
    :showArrow="true"
    id="carousel-1"
    size="sm"
    color="white"
    show-dots
    direction="vertical"
    dot-placement="right"
    arrow-placement="right"
  />
</template>

Custom Render

Vue

<template>
  <HLCarousel :showArrow="true" id="carousel-2">
    <template #customRender>
      <a href="https://google.com" target="_blank">
        <img
          style=" width: 100%;height: 240px;object-fit: cover;"
          src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel1.jpeg"
        />
      </a>
      <a href="https://google.com" target="_blank">
        <img
          style=" width: 100%;height: 240px;object-fit: cover;"
          src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel4.jpeg"
        />
      </a>
      <a href="https://google.com" target="_blank">
        <img
          style=" width: 100%;height: 240px;object-fit: cover;"
          src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel2.jpeg"
        />
      </a>
    </template>
  </HLCarousel>
</template>

Custom Arrows

Vue

<HLCarousel :carouselItems="items" :showDots="true" :showArrow="true" id="carousel-3">
  <template #customArrows="{ total, to, currentIndex, prev, next }">
    <div class="hr-custom-arrow">
      <button type="button" class="custom-arrow--left" @click="prev">
        <ArrowLeftIcon class="w-5 h-5" />
      </button>
      <button type="button" class="custom-arrow--right" @click="next">
        <ArrowRightIcon class="w-5 h-5" />
      </button>
    </div>
  </template>
  <template #customDots="{ total, currentIndex, changeTo }">
    <ul class="hr-custom-dots">
      <li v-for="index of total" :key="index" :class="{ ['is-active']: currentIndex === index - 1 }" @click="changeTo(index - 1)" />
    </ul>
  </template>
</HLCarousel>

Import

import { HLCarousel } from '@platform-ui/highrise'

Basic Usage

Props

Prop	Type	Default	Description
id *	string	-	Unique identifier for the carousel
showArrow	boolean	false	Show navigation arrows
autoPlay	boolean	false	Enable automatic slide transition
direction	'horizontal' | 'vertical'	'horizontal'	Carousel direction
dotPlacement	'left' | 'right' | 'bottom' | 'top'	'bottom'	Position of navigation dots
arrowPlacement	'top' | 'bottom' | 'left' | 'right' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'	'bottomRight'	Position of navigation arrows
dotType	'dot' | 'line'	'dot'	Style of navigation dots
itemsPerView	number | 'auto'	1	Number of items visible per view
spaceBetweenItems	number	0	Space (px) between items
draggable	boolean	false	Allow dragging to navigate
loop	boolean	false	Enable infinite looping
centeredItems	boolean	false	Center items in the carousel
mousewheel	boolean	false	Enable mouse wheel navigation
showDots	boolean	false	Show navigation dots
interval	number	500	Autoplay interval (ms) this will be ignored if autoPlay is false
effect	'card' | 'slide' | 'fade' | 'custom'	'slide'	Transition effect
size	'sm' | 'md' | 'lg'	'md'	Size of the carousel
color	'blue' | 'gray' | 'white'	'blue'	Color of the carousel
touchable	boolean	true	Enable touch navigation
carouselItems	HLCarouselItem[]	[]	Array of items to display (see below)
classNames	string	-	Custom class names for the root element
currentIndex	number	-	Controlled current index (for external control)
transitionProps	TransitionProps	-	Transition props for the carousel
transitionStyle	{ transitionDuration?: string; transitionTimingFunction?: string }	-	Transition style for the carousel
fadeIn	boolean	true	Enable fade in effect for the carousel
fadeOut	boolean	true	Enable fade out effect for the carousel

HLCarouselItem Type

interface HLCarouselItem {
  key: string
  src: string
  class?: string
}

---

Emits

Name	Parameters	Description
@update:index	(currentIndex: number, lastIndex: number)	Fired when the changes