Carousel

The Carousel component provides a powerful, flexible carousel/slider built on Swiper.js. It supports navigation arrows, pagination indicators, autoplay, infinite looping, grid layouts, zoom functionality, and pagination with infinite scroll. Perfect for displaying image galleries, product showcases, testimonials, or any collection of content.

The Carousel component displays slides in a horizontal scrolling container. Use IkCarouselSlide components as children.

Source code
<template>
  <IkCarousel>
    <IkCarouselSlide>
      <div style="background: var(--background-primary-solid-default); padding: 48px; text-align: center; color: white;">
        Slide 1
      </div>
    </IkCarouselSlide>
    <IkCarouselSlide>
      <div style="background: var(--background-success-solid-default); padding: 48px; text-align: center; color: white;">
        Slide 2
      </div>
    </IkCarouselSlide>
    <IkCarouselSlide>
      <div style="background: var(--background-error-solid-default); padding: 48px; text-align: center; color: white;">
        Slide 3
      </div>
    </IkCarouselSlide>
  </IkCarousel>
</template>
<script setup>
import { IkCarousel, IkCarouselSlide } from '@ikol/ui-kit/components/IkCarousel';
</script>

Navigation arrows are enabled by default. Use the navigation prop to control their visibility.

Source code
<template>
  <div style="display: flex; flex-direction: column; gap: 16px;">
    <div>
      <div style="margin-bottom: 8px;">With navigation (default):</div>
      <IkCarousel>
        <IkCarouselSlide><div style="background: var(--background-primary-solid-default); padding: 48px; text-align: center; color: white;">Slide 1</div></IkCarouselSlide>
        <IkCarouselSlide><div style="background: var(--background-success-solid-default); padding: 48px; text-align: center; color: white;">Slide 2</div></IkCarouselSlide>
        <IkCarouselSlide><div style="background: var(--background-error-solid-default); padding: 48px; text-align: center; color: white;">Slide 3</div></IkCarouselSlide>
      </IkCarousel>
    </div>
    <div>
      <div style="margin-bottom: 8px;">Without navigation:</div>
      <IkCarousel :navigation="false">
        <IkCarouselSlide><div style="background: var(--background-primary-solid-default); padding: 48px; text-align: center; color: white;">Slide 1</div></IkCarouselSlide>
        <IkCarouselSlide><div style="background: var(--background-success-solid-default); padding: 48px; text-align: center; color: white;">Slide 2</div></IkCarouselSlide>
        <IkCarouselSlide><div style="background: var(--background-error-solid-default); padding: 48px; text-align: center; color: white;">Slide 3</div></IkCarouselSlide>
      </IkCarousel>
    </div>
  </div>
</template>
<script setup>
import { IkCarousel, IkCarouselSlide } from '@ikol/ui-kit/components/IkCarousel';
</script>

Control the position of navigation arrows using the navigation_position prop (side or bottom).

Source code
<template>
  <div style="display: flex; flex-direction: column; gap: 16px;">
    <div>
      <div style="margin-bottom: 8px;">Side navigation (default):</div>
      <IkCarousel navigation_position="side">
        <IkCarouselSlide><div style="background: var(--background-primary-solid-default); padding: 48px; text-align: center; color: white;">Slide 1</div></IkCarouselSlide>
        <IkCarouselSlide><div style="background: var(--background-success-solid-default); padding: 48px; text-align: center; color: white;">Slide 2</div></IkCarouselSlide>
        <IkCarouselSlide><div style="background: var(--background-error-solid-default); padding: 48px; text-align: center; color: white;">Slide 3</div></IkCarouselSlide>
      </IkCarousel>
    </div>
    <div>
      <div style="margin-bottom: 8px;">Bottom navigation:</div>
      <IkCarousel navigation_position="bottom">
        <IkCarouselSlide><div style="background: var(--background-primary-solid-default); padding: 48px; text-align: center; color: white;">Slide 1</div></IkCarouselSlide>
        <IkCarouselSlide><div style="background: var(--background-success-solid-default); padding: 48px; text-align: center; color: white;">Slide 2</div></IkCarouselSlide>
        <IkCarouselSlide><div style="background: var(--background-error-solid-default); padding: 48px; text-align: center; color: white;">Slide 3</div></IkCarouselSlide>
      </IkCarousel>
    </div>
  </div>
</template>
<script setup>
import { IkCarousel, IkCarouselSlide } from '@ikol/ui-kit/components/IkCarousel';
</script>

Pagination indicators

Pagination indicators (bullets) are enabled by default. Use the indicators prop to control their visibility.

Source code
<template>
  <div style="display: flex; flex-direction: column; gap: 16px;">
    <div>
      <div style="margin-bottom: 8px;">With indicators (default):</div>
      <IkCarousel>
        <IkCarouselSlide><div style="background: var(--background-primary-solid-default); padding: 48px; text-align: center; color: white;">Slide 1</div></IkCarouselSlide>
        <IkCarouselSlide><div style="background: var(--background-success-solid-default); padding: 48px; text-align: center; color: white;">Slide 2</div></IkCarouselSlide>
        <IkCarouselSlide><div style="background: var(--background-error-solid-default); padding: 48px; text-align: center; color: white;">Slide 3</div></IkCarouselSlide>
      </IkCarousel>
    </div>
    <div>
      <div style="margin-bottom: 8px;">Without indicators:</div>
      <IkCarousel :indicators="false">
        <IkCarouselSlide><div style="background: var(--background-primary-solid-default); padding: 48px; text-align: center; color: white;">Slide 1</div></IkCarouselSlide>
        <IkCarouselSlide><div style="background: var(--background-success-solid-default); padding: 48px; text-align: center; color: white;">Slide 2</div></IkCarouselSlide>
        <IkCarouselSlide><div style="background: var(--background-error-solid-default); padding: 48px; text-align: center; color: white;">Slide 3</div></IkCarouselSlide>
      </IkCarousel>
    </div>
  </div>
</template>
<script setup>
import { IkCarousel, IkCarouselSlide } from '@ikol/ui-kit/components/IkCarousel';
</script>

Autoplay

Enable automatic sliding using the autoplay prop. Control the delay between slides with the interval prop (default is 5000ms).

Source code
<template>
  <IkCarousel autoplay :interval="3000">
    <IkCarouselSlide><div style="background: var(--background-primary-solid-default); padding: 48px; text-align: center; color: white;">Slide 1</div></IkCarouselSlide>
    <IkCarouselSlide><div style="background: var(--background-success-solid-default); padding: 48px; text-align: center; color: white;">Slide 2</div></IkCarouselSlide>
    <IkCarouselSlide><div style="background: var(--background-error-solid-default); padding: 48px; text-align: center; color: white;">Slide 3</div></IkCarouselSlide>
    <IkCarouselSlide><div style="background: var(--background-warning-solid-default); padding: 48px; text-align: center; color: white;">Slide 4</div></IkCarouselSlide>
  </IkCarousel>
</template>
<script setup>
import { IkCarousel, IkCarouselSlide } from '@ikol/ui-kit/components/IkCarousel';
</script>

Loop

Infinite looping is enabled by default. Use the loop prop to control this behavior.

Source code
<template>
  <div style="display: flex; flex-direction: column; gap: 16px;">
    <div>
      <div style="margin-bottom: 8px;">With loop (default):</div>
      <IkCarousel>
        <IkCarouselSlide><div style="background: var(--background-primary-solid-default); padding: 48px; text-align: center; color: white;">Slide 1</div></IkCarouselSlide>
        <IkCarouselSlide><div style="background: var(--background-success-solid-default); padding: 48px; text-align: center; color: white;">Slide 2</div></IkCarouselSlide>
        <IkCarouselSlide><div style="background: var(--background-error-solid-default); padding: 48px; text-align: center; color: white;">Slide 3</div></IkCarouselSlide>
      </IkCarousel>
    </div>
    <div>
      <div style="margin-bottom: 8px;">Without loop:</div>
      <IkCarousel :loop="false">
        <IkCarouselSlide><div style="background: var(--background-primary-solid-default); padding: 48px; text-align: center; color: white;">Slide 1</div></IkCarouselSlide>
        <IkCarouselSlide><div style="background: var(--background-success-solid-default); padding: 48px; text-align: center; color: white;">Slide 2</div></IkCarouselSlide>
        <IkCarouselSlide><div style="background: var(--background-error-solid-default); padding: 48px; text-align: center; color: white;">Slide 3</div></IkCarouselSlide>
      </IkCarousel>
    </div>
  </div>
</template>
<script setup>
import { IkCarousel, IkCarouselSlide } from '@ikol/ui-kit/components/IkCarousel';
</script>

Slides per view

Control how many slides are visible at once using the slides_per_view prop.

Source code
<template>
  <div style="display: flex; flex-direction: column; gap: 16px;">
    <div>
      <div style="margin-bottom: 8px;">1 slide per view (default):</div>
      <IkCarousel>
        <IkCarouselSlide><div style="background: var(--background-primary-solid-default); padding: 48px; text-align: center; color: white;">Slide 1</div></IkCarouselSlide>
        <IkCarouselSlide><div style="background: var(--background-success-solid-default); padding: 48px; text-align: center; color: white;">Slide 2</div></IkCarouselSlide>
        <IkCarouselSlide><div style="background: var(--background-error-solid-default); padding: 48px; text-align: center; color: white;">Slide 3</div></IkCarouselSlide>
      </IkCarousel>
    </div>
    <div>
      <div style="margin-bottom: 8px;">2 slides per view:</div>
      <IkCarousel :slides_per_view="2">
        <IkCarouselSlide><div style="background: var(--background-primary-solid-default); padding: 48px; text-align: center; color: white;">Slide 1</div></IkCarouselSlide>
        <IkCarouselSlide><div style="background: var(--background-success-solid-default); padding: 48px; text-align: center; color: white;">Slide 2</div></IkCarouselSlide>
        <IkCarouselSlide><div style="background: var(--background-error-solid-default); padding: 48px; text-align: center; color: white;">Slide 3</div></IkCarouselSlide>
        <IkCarouselSlide><div style="background: var(--background-warning-solid-default); padding: 48px; text-align: center; color: white;">Slide 4</div></IkCarouselSlide>
      </IkCarousel>
    </div>
    <div>
      <div style="margin-bottom: 8px;">3 slides per view:</div>
      <IkCarousel :slides_per_view="3" :space_between="16">
        <IkCarouselSlide><div style="background: var(--background-primary-solid-default); padding: 48px; text-align: center; color: white;">Slide 1</div></IkCarouselSlide>
        <IkCarouselSlide><div style="background: var(--background-success-solid-default); padding: 48px; text-align: center; color: white;">Slide 2</div></IkCarouselSlide>
        <IkCarouselSlide><div style="background: var(--background-error-solid-default); padding: 48px; text-align: center; color: white;">Slide 3</div></IkCarouselSlide>
        <IkCarouselSlide><div style="background: var(--background-warning-solid-default); padding: 48px; text-align: center; color: white;">Slide 4</div></IkCarouselSlide>
        <IkCarouselSlide><div style="background: var(--background-primary-solid-default); padding: 48px; text-align: center; color: white;">Slide 5</div></IkCarouselSlide>
      </IkCarousel>
    </div>
  </div>
</template>
<script setup>
import { IkCarousel, IkCarouselSlide } from '@ikol/ui-kit/components/IkCarousel';
</script>

Space between slides

Control the spacing between slides using the space_between prop (in pixels).

Source code
<template>
  <div style="display: flex; flex-direction: column; gap: 16px;">
    <div>
      <div style="margin-bottom: 8px;">No space (default):</div>
      <IkCarousel :slides_per_view="3">
        <IkCarouselSlide><div style="background: var(--background-primary-solid-default); padding: 48px; text-align: center; color: white;">Slide 1</div></IkCarouselSlide>
        <IkCarouselSlide><div style="background: var(--background-success-solid-default); padding: 48px; text-align: center; color: white;">Slide 2</div></IkCarouselSlide>
        <IkCarouselSlide><div style="background: var(--background-error-solid-default); padding: 48px; text-align: center; color: white;">Slide 3</div></IkCarouselSlide>
      </IkCarousel>
    </div>
    <div>
      <div style="margin-bottom: 8px;">16px space:</div>
      <IkCarousel :slides_per_view="3" :space_between="16">
        <IkCarouselSlide><div style="background: var(--background-primary-solid-default); padding: 48px; text-align: center; color: white;">Slide 1</div></IkCarouselSlide>
        <IkCarouselSlide><div style="background: var(--background-success-solid-default); padding: 48px; text-align: center; color: white;">Slide 2</div></IkCarouselSlide>
        <IkCarouselSlide><div style="background: var(--background-error-solid-default); padding: 48px; text-align: center; color: white;">Slide 3</div></IkCarouselSlide>
      </IkCarousel>
    </div>
    <div>
      <div style="margin-bottom: 8px;">32px space:</div>
      <IkCarousel :slides_per_view="3" :space_between="32">
        <IkCarouselSlide><div style="background: var(--background-primary-solid-default); padding: 48px; text-align: center; color: white;">Slide 1</div></IkCarouselSlide>
        <IkCarouselSlide><div style="background: var(--background-success-solid-default); padding: 48px; text-align: center; color: white;">Slide 2</div></IkCarouselSlide>
        <IkCarouselSlide><div style="background: var(--background-error-solid-default); padding: 48px; text-align: center; color: white;">Slide 3</div></IkCarouselSlide>
      </IkCarousel>
    </div>
  </div>
</template>
<script setup>
import { IkCarousel, IkCarouselSlide } from '@ikol/ui-kit/components/IkCarousel';
</script>

Centered slides

Use the centered_slides prop to center the active slide.

Source code
<template>
  <IkCarousel :slides_per_view="3" centered_slides :space_between="16">
    <IkCarouselSlide><div style="background: var(--background-primary-solid-default); padding: 48px; text-align: center; color: white;">Slide 1</div></IkCarouselSlide>
    <IkCarouselSlide><div style="background: var(--background-success-solid-default); padding: 48px; text-align: center; color: white;">Slide 2</div></IkCarouselSlide>
    <IkCarouselSlide><div style="background: var(--background-error-solid-default); padding: 48px; text-align: center; color: white;">Slide 3</div></IkCarouselSlide>
    <IkCarouselSlide><div style="background: var(--background-warning-solid-default); padding: 48px; text-align: center; color: white;">Slide 4</div></IkCarouselSlide>
  </IkCarousel>
</template>
<script setup>
import { IkCarousel, IkCarouselSlide } from '@ikol/ui-kit/components/IkCarousel';
</script>

Free mode

Enable free scrolling (no snapping) using the free prop.

Source code
<template>
  <IkCarousel free :slides_per_view="3" :space_between="16">
    <IkCarouselSlide><div style="background: var(--background-primary-solid-default); padding: 48px; text-align: center; color: white;">Slide 1</div></IkCarouselSlide>
    <IkCarouselSlide><div style="background: var(--background-success-solid-default); padding: 48px; text-align: center; color: white;">Slide 2</div></IkCarouselSlide>
    <IkCarouselSlide><div style="background: var(--background-error-solid-default); padding: 48px; text-align: center; color: white;">Slide 3</div></IkCarouselSlide>
    <IkCarouselSlide><div style="background: var(--background-warning-solid-default); padding: 48px; text-align: center; color: white;">Slide 4</div></IkCarouselSlide>
  </IkCarousel>
</template>
<script setup>
import { IkCarousel, IkCarouselSlide } from '@ikol/ui-kit/components/IkCarousel';
</script>

Zoom

Enable zoom functionality using the zoomable prop. Users can zoom in/out using the mouse wheel.

Source code
<template>
  <IkCarousel zoomable>
    <IkCarouselSlide zoomable>
      <IkImage src="https://picsum.photos/800/600" alt="Zoomable image" />
    </IkCarouselSlide>
    <IkCarouselSlide zoomable>
      <IkImage src="https://picsum.photos/800/600?random=2" alt="Zoomable image" />
    </IkCarouselSlide>
    <IkCarouselSlide zoomable>
      <IkImage src="https://picsum.photos/800/600?random=3" alt="Zoomable image" />
    </IkCarouselSlide>
  </IkCarousel>
</template>
<script setup>
import { IkCarousel, IkCarouselSlide } from '@ikol/ui-kit/components/IkCarousel';
import { IkImage } from '@ikol/ui-kit/components/IkImage';
</script>

Pagination

Enable pagination with infinite scroll using the paginate prop. The carousel will emit ik-load-more events when the loader slide becomes visible.

Source code
<template>
  <div style="display: flex; flex-direction: column; gap: 16px;">
    <IkCarousel paginate @ik-load-more="loadMore">
      <IkCarouselSlide v-for="slide in slides" :key="slide">
        <div style="background: var(--background-primary-solid-default); padding: 48px; text-align: center; color: white;">
          {{ slide }}
        </div>
      </IkCarouselSlide>
    </IkCarousel>
    <div>Loaded {{ slides.length }} slides</div>
  </div>
</template>
<script setup>
import { IkCarousel, IkCarouselSlide } from '@ikol/ui-kit/components/IkCarousel';
import { ref } from 'vue';

const slides = ref(['Slide 1', 'Slide 2', 'Slide 3']);

function loadMore() {
  const newSlides = Array.from({ length: 3 }, (_, i) => `Slide ${slides.value.length + i + 1}`);
  slides.value.push(...newSlides);
}
</script>

Design variants

Apply different design colors using the design prop.

Source code
<template>
  <div style="display: flex; flex-direction: column; gap: 16px;">
    <div>
      <div style="margin-bottom: 8px;">Default design:</div>
      <IkCarousel design="default">
        <IkCarouselSlide><div style="background: var(--background-primary-solid-default); padding: 48px; text-align: center; color: white;">Slide 1</div></IkCarouselSlide>
        <IkCarouselSlide><div style="background: var(--background-success-solid-default); padding: 48px; text-align: center; color: white;">Slide 2</div></IkCarouselSlide>
      </IkCarousel>
    </div>
    <div>
      <div style="margin-bottom: 8px;">Primary design:</div>
      <IkCarousel design="primary">
        <IkCarouselSlide><div style="background: var(--background-primary-solid-default); padding: 48px; text-align: center; color: white;">Slide 1</div></IkCarouselSlide>
        <IkCarouselSlide><div style="background: var(--background-success-solid-default); padding: 48px; text-align: center; color: white;">Slide 2</div></IkCarouselSlide>
      </IkCarousel>
    </div>
  </div>
</template>
<script setup>
import { IkCarousel, IkCarouselSlide } from '@ikol/ui-kit/components/IkCarousel';
</script>
Image
IK UI
© 2025 IK UI. All rights reserved.