Swiper Carousel

Touch-responsive, high-performance carousel sliders powered by SwiperJS, with autoplay, pagination, and fade transitions.

Preview & Interactive Laboratory

Live Touch Deck

Swiper Slide 1

Swiper Slide 2

Swiper Slide 3

Usage & Implementation

import { SwiperCarousel } from "@/components/ui/swiper-carousel"

<SwiperCarousel 
  items={[<div key={1}>Slide 1</div>, <div key={2}>Slide 2</div>]} 
  autoplay 
  pagination 
/>

React / Tailwind

Granular Customization

Swiper Container

Configures parent viewport dimensions or alignment styles.

className={`className`}

Pagination Pager

Add clickable dots or pagination lists under the viewport.

className={`pagination={true}`}

Effect Transition

Configure transition effect presets.

className={`effect='fade' | 'slide'`}

API Reference (Props)

Prop	Type	Default	Description
items	React.ReactNode[]	undefined	Array of child slide nodes to display.
slidesPerView	number \| 'auto'	1	Slides visible per frame.
spaceBetween	number	30	Margin spacing between slides in pixels.
autoplay	boolean	false	Enables automatic slide flipping.
pagination	boolean	true	Displays pagination bullets.
navigation	boolean	true	Displays navigation arrow buttons.