CarouselX

A lightweight, zero-config carousel component built on Swiper.js. Drop-in replacement with auto CSS injection and image flicker fix.

Features

• Zero CSS config - CSS is auto-injected, no manual imports needed
• Image flicker fix - Resolves image flickering during slide transitions
• Drop-in replacement - Same API as Swiper, just change the import path
• New component names - Use CarouselX / CarouselXSlide or keep Swiper / SwiperSlide
• All Swiper modules - Autoplay, Pagination, Navigation, EffectFade, and more
• Responsive - Mobile-first, works on all screen sizes

Install

npm install carouselx

Quick Start

'use client'

import { CarouselX, CarouselXSlide, Autoplay, Pagination } from 'carouselx/react'

export default function MyCarousel() {
  return (
    <CarouselX
      modules={[Autoplay, Pagination]}
      autoplay={{ delay: 3000, disableOnInteraction: false }}
      pagination={{ clickable: true }}
      loop
    >
      <CarouselXSlide>
        <img src="/slide1.jpg" alt="Slide 1" />
      </CarouselXSlide>
      <CarouselXSlide>
        <img src="/slide2.jpg" alt="Slide 2" />
      </CarouselXSlide>
    </CarouselX>
  )
}

No import 'swiper/css' needed — CSS is automatically loaded.

Component Mapping

| CarouselX | Swiper (compatible) | Description | |---|---|---| | CarouselX | Swiper | Carousel container | | CarouselXSlide | SwiperSlide | Slide wrapper | | useCarouselX | useSwiper | Access carousel instance |

Both naming styles work — use whichever you prefer.

Available Modules

All Swiper modules are exported from carouselx/react:

Autoplay · Pagination · Navigation · EffectFade · Thumbs · FreeMode · Grid · Scrollbar · Zoom · Virtual · Mousewheel · Keyboard · A11y · HashNavigation · History · Controller · Parallax · Manipulation

Migration from Swiper

- import { Swiper, SwiperSlide } from 'swiper/react'
- import { Autoplay } from 'swiper/modules'
- import 'swiper/css'
- import 'swiper/css/pagination'
+ import { CarouselX, CarouselXSlide, Autoplay } from 'carouselx/react'

License

MIT