nijex-slider
v1.4.6
Published
A modern, lightweight, highly customizable, responsive React slider and carousel component library with touch swipe gestures, continuous marquee ticker mode, infinite loop, RTL support, zero heavy dependencies, and CSS variable styling.
Readme
nijex-slider 🚀
A modern, lightweight, highly customizable React slider & carousel library. Built with TypeScript, touch swipe gestures, continuous marquee ticker mode, seamless infinite looping, native RTL support, zero heavy dependencies, and CSS variable styling.
🌐 Live Interactive Demo
Test all slider features live (Seamless Infinite Loop, Continuous Ticker, RTL layout, Card Carousels, and Thumbnail Galleries):
🔗 https://nijex-slider.vercel.app
📋 Table of Contents
✨ Features
- ⚡ Zero Heavy Dependencies: Ultra-fast, 60fps hardware-accelerated CSS animations.
- 🖐️ Touch & Drag Gestures: Mouse drag on desktop and touch swipe on mobile devices with velocity tracking.
- ♾️ Continuous Marquee Ticker Mode: Smooth, uninterrupted auto-scroll mode for brand logos, tickers, and news banners.
- 🔄 Seamless Infinite Loop: Moves continuously forward from the last slide to the first slide without rewinding backward.
- 🌍 Native RTL Support: Complete right-to-left layout and gesture support for Arabic, Hebrew, and Persian languages.
- 📱 Desktop & Mobile Responsive:
maxWidthbreakpoint configuration (slidesPerView&spacing). - 🎨 100% Themeable: Custom CSS variables, custom arrow icons (
customPrevArrow,customNextArrow), and custom pagination dot renderer (renderDot). - 🖼️ Product Thumbnail Gallery: Built-in linked thumbnail preview bar for e-commerce product pages.
📦 Installation
Install nijex-slider via your favorite package manager:
npm install nijex-slider
# or
yarn add nijex-slider
# or
pnpm add nijex-slider🚀 Quick Start
Import NijexSlider, NijexSlide, and the library CSS stylesheet:
import React from 'react';
import { NijexSlider, NijexSlide } from 'nijex-slider';
import 'nijex-slider/style.css';
export function SimpleCarousel() {
return (
<NijexSlider
effect="slide"
autoplay={{ delay: 4000, showProgressBar: true }}
loop={true}
showArrows={true}
showDots={true}
>
<NijexSlide>
<div style={{ height: 300, background: '#6366f1', color: '#fff', padding: 20 }}>
<h2>Slide 1</h2>
</div>
</NijexSlide>
<NijexSlide>
<div style={{ height: 300, background: '#ec4899', color: '#fff', padding: 20 }}>
<h2>Slide 2</h2>
</div>
</NijexSlide>
<NijexSlide>
<div style={{ height: 300, background: '#10b981', color: '#fff', padding: 20 }}>
<h2>Slide 3</h2>
</div>
</NijexSlide>
</NijexSlider>
);
}💡 Usage Examples
1. Continuous Marquee Ticker (Logos / Banners)
Smooth, uninterrupted running banner for client logos or announcement tickers (pauses on hover):
import { NijexSlider, NijexSlide } from 'nijex-slider';
import 'nijex-slider/style.css';
export function LogoTicker() {
return (
<NijexSlider
continuous={true}
continuousSpeed={15} // Marquee loop duration in seconds
>
<NijexSlide><img src="/logo1.svg" alt="Client 1" /></NijexSlide>
<NijexSlide><img src="/logo2.svg" alt="Client 2" /></NijexSlide>
<NijexSlide><img src="/logo3.svg" alt="Client 3" /></NijexSlide>
<NijexSlide><img src="/logo4.svg" alt="Client 4" /></NijexSlide>
</NijexSlider>
);
}2. Multi-Card Responsive Carousel
Display multiple visible cards per view with maxWidth breakpoint configuration:
import { NijexSlider, NijexSlide } from 'nijex-slider';
import 'nijex-slider/style.css';
export function MultiCardSlider() {
return (
<NijexSlider
slidesPerView={1}
spacing={16}
loop={true}
responsive={{
1200: { slidesPerView: 4, spacing: 24 },
992: { slidesPerView: 3, spacing: 20 },
768: { slidesPerView: 2, spacing: 16 },
}}
>
<NijexSlide><Card title="Card 1" /></NijexSlide>
<NijexSlide><Card title="Card 2" /></NijexSlide>
<NijexSlide><Card title="Card 3" /></NijexSlide>
<NijexSlide><Card title="Card 4" /></NijexSlide>
</NijexSlider>
);
}3. Product Gallery with Thumbnails
Linked thumbnail preview bar for e-commerce product pages:
import { NijexSlider, NijexSlide } from 'nijex-slider';
import 'nijex-slider/style.css';
const thumbnails = [
{ id: 1, src: '/images/shoe1.jpg', title: 'Front view' },
{ id: 2, src: '/images/shoe2.jpg', title: 'Side view' },
{ id: 3, src: '/images/shoe3.jpg', title: 'Back view' },
];
export function ProductGallery() {
return (
<NijexSlider
showThumbnails={true}
thumbnails={thumbnails}
effect="fade"
showDots={false}
>
{thumbnails.map((item) => (
<NijexSlide key={item.id}>
<img src={item.src} alt={item.title} style={{ width: '100%', height: 400, objectFit: 'cover' }} />
</NijexSlide>
))}
</NijexSlider>
);
}4. Right-to-Left (RTL) Support
Native RTL layout and gesture support for Arabic, Hebrew, and Persian languages:
import { NijexSlider, NijexSlide } from 'nijex-slider';
import 'nijex-slider/style.css';
export function RtlCarousel() {
return (
<NijexSlider rtl={true} loop={true}>
<NijexSlide><div>مرحبا بك (Slide 1)</div></NijexSlide>
<NijexSlide><div>الشريحة الثانية (Slide 2)</div></NijexSlide>
</NijexSlider>
);
}📖 API Reference
NijexSliderProps
| Prop | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| effect | 'slide' \| 'fade' | 'slide' | Transition animation mode |
| orientation | 'horizontal' \| 'vertical' | 'horizontal' | Slide layout direction |
| loop | boolean | true | Seamless Infinite Loop (moves forward without rewind) |
| rtl | boolean | false | Right-to-Left Layout & Touch Support for RTL languages |
| continuous | boolean | false | Continuous Ticker / Marquee Mode for smooth running banners |
| continuousSpeed | number | 15 | Marquee scroll cycle speed in seconds |
| initialSlide | number | 0 | Index of initial active slide |
| slidesPerView | number | 1 | Number of slides visible at once |
| spacing | number | 0 | Gap between slides in pixels |
| responsive | ResponsiveBreakpoints | undefined | Responsive rules by maxWidth px (e.g., { 768: { slidesPerView: 2 } }) |
| autoplay | boolean \| AutoplayOptions | false | Enable autoplay timer and progress bar |
| swipeable | boolean | true | Enable touch & mouse drag gestures |
| swipeThreshold | number | 40 | Minimum swipe distance in px to trigger slide |
| speed | number | 400 | Transition duration in milliseconds |
| showArrows | boolean | true | Display next / prev arrow buttons |
| showDots | boolean | true | Display pagination dot indicators |
| showFraction | boolean | false | Display slide fraction counter (e.g., 1 / 5) |
| customPrevArrow | ReactNode | undefined | Custom icon / JSX element for previous arrow |
| customNextArrow | ReactNode | undefined | Custom icon / JSX element for next arrow |
| renderDot | (index, isActive) => ReactNode | undefined | Custom render function for pagination dots |
| arrowClassName | string | '' | Custom CSS class for arrow buttons |
| arrowStyle | CSSProperties | {} | Custom CSS style object for arrow buttons |
| dotsClassName | string | '' | Custom CSS class for dots container |
| dotsStyle | CSSProperties | {} | Custom CSS style object for dots container |
| dotClassName | string | '' | Custom CSS class for individual dots |
| activeDotClassName | string | '' | Custom CSS class for the active dot |
| showThumbnails | boolean | false | Display thumbnail navigation bar |
| thumbnails | Array<{ src: string; title?: string }> | undefined | Thumbnail image list |
| onSlideChange | (index: number) => void | undefined | Callback invoked when active slide changes |
| onInit | (api: NijexSliderApi) => void | undefined | Callback invoked with slider API handle |
NijexSliderApi Methods (via onInit)
const [slider, setSlider] = useState<NijexSliderApi | null>(null);
<NijexSlider onInit={(api) => setSlider(api)}>
{/* slides */}
</NijexSlider>
// Access API methods imperatively:
slider?.next();
slider?.prev();
slider?.goTo(2);
slider?.toggleAutoplay();🎨 Styling & Customization
Nijex Slider uses CSS variables for effortless global styling overrides:
:root {
--nijex-slider-primary: #6366f1;
--nijex-slider-control-bg: rgba(15, 23, 42, 0.7);
--nijex-slider-control-color: #ffffff;
--nijex-slider-dot-color: rgba(255, 255, 255, 0.4);
--nijex-slider-dot-active-color: #6366f1;
--nijex-slider-radius: 16px;
--nijex-slider-arrow-size: 44px;
}📄 License
MIT © Nijex