FluxCarousel

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 FluxCarousel / FluxSlide or keep Swiper / SwiperSlide
• All Swiper modules - Autoplay, Pagination, Navigation, EffectFade, and more
• Responsive - Mobile-first, works on all screen sizes

Install

npm install fluxcarousel

Quick Start

'use client'

import { FluxCarousel, FluxSlide, Autoplay, Pagination } from 'fluxcarousel/react'

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

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

Component Mapping

| FluxCarousel | Swiper (compatible) | Description | |---|---|---| | FluxCarousel | Swiper | Carousel container | | FluxSlide | SwiperSlide | Slide wrapper | | useFluxCarousel | useSwiper | Access carousel instance |

Both naming styles work — use whichever you prefer.

Available Modules

All Swiper modules are exported from fluxcarousel/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 { FluxCarousel, FluxSlide, Autoplay } from 'fluxcarousel/react'

License

MIT