Carousel

Splide is our go-to carousel component, providing a flexible and customizable way to display content in a sliding format.

A style wrapper is provided that will add the required styles to have the carousel fit the Codey Design system.

Installation

For general installation instructions, please refer to the vue-splide guide.

When it comes to the CSS section, the following is required instead of importing the default theme:

<script setup lang="ts">
import { SplideCarouselStyles } from "@xerius/codey-components";
import { Splide, SplideSlide } from "@splidejs/vue-splide";
</script>

<template>
  {/* Add our carousel styles */}
  <SplideCarouselStyles />

  {/* Add your carousel usage */}
  <Splide>
    <SplideSlide>
      <!-- Your content here -->
    </SplideSlide>
  </Splide>
</template>

Showcases

Default

Without Arrows

Utilities

splideCarouselCustomArrowPath

When arrow keys are required, we provide a custom arrow path that fits the Codey Design system. This path can be used to replace the default arrow icons provided by Splide.

Set the arrowPath option with the imported splideCarouselCustomArrowPath.

<script setup lang="ts">
import { ... , splideCarouselCustomArrowPath } from "@xerius/codey-components"; //...
</script>

<template>
  <Splide
    class="min-w-[20rem]"
    tag="section"
    :options="{
      arrowPath: splideCarouselCustomArrowPath,
    }"
    aria-label="My Favorite Pokemon's"
  >
    ...
  </Splide>
</template>

Example

Below is a full example of a carousel using the provided styles and custom arrow path.

Note

You are responsible for sizing the carousel (wrapper) and its content (slides).

<script setup lang="ts">
import { Splide, SplideSlide } from "@splidejs/vue-splide";
import { SplideCarouselStyles, splideCarouselCustomArrowPath } from "@xerius/codey-components";

const basePokeAPISpriteUrl =
  "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/";

const pokemons = [
  {
    id: 25,
    imgUrl: `${basePokeAPISpriteUrl}25.png`,
  },
  {
    id: 35,
    imgUrl: `${basePokeAPISpriteUrl}35.png`,
  },
  {
    id: 45,
    imgUrl: `${basePokeAPISpriteUrl}45.png`,
  },
  {
    id: 55,
    imgUrl: `${basePokeAPISpriteUrl}55.png`,
  },
  {
    id: 65,
    imgUrl: `${basePokeAPISpriteUrl}65.png`,
  },
  {
    id: 75,
    imgUrl: `${basePokeAPISpriteUrl}75.png`,
  },
];
</script>

<template>
  <SplideCarouselStyles />

  <Splide
    class="min-w-[20rem]"
    tag="section"
    :options="{
      rewind: true,
      arrowPath: splideCarouselCustomArrowPath,
    }"
    aria-label="My Favorite Pokemon's"
  >
    <SplideSlide v-for="pokemon in pokemons" :key="pokemon.id">
      <div class="flex justify-center items-center p-4">
        <img
          class="size-[15rem] bg-color-backdrop"
          :src="pokemon.imgUrl"
          :alt="'Sample ' + pokemon.id"
        />
      </div>
    </SplideSlide>
  </Splide>
</template>