AwesomeClassicSlider

Awesome Classic Slider/Carousel is a production-grade animated 2D carousel for React with a clean public API and built-in data loading. It supports static arrays, local JSON files, and remote REST endpoints out of the box.

Installation

npm install react-awesome-classic-slider

Simple Example

Quick Start

import { AwesomeClassicSlider } from 'react-awesome-classic-slider'
import 'react-awesome-classic-slider/style.css'

const slides = [
  {
    image: 'https://images.unsplash.com/photo-1500530855697-b586d89ba3ee',
    title: 'Highlands Drift',
    subtitle: 'Exploration',
    description: 'Winding roads, endless horizons, cinematic motion.',
    tag: 'Featured',
    cta: 'View Route',
    ctaClick: () => alert('Viewing route...'),
  },
  {
    image: 'https://images.unsplash.com/photo-1500534314209-a25ddb2bd429',
    title: 'Aurora Pass',
    subtitle: 'Night Drive',
    description: 'Glowing skies and crisp northern air.',
  },
]

export default function App() {
  return <AwesomeClassicSlider data={slides} />
}

Props

| Prop | Type | Default | Description | | --- | --- | --- | --- | | data | Array or string | Required | Slide array, JSON path, or REST API URL. | | theme | 'light' | 'dark' | 'purple' | 'dark' | Color theme for UI elements. | | arrow | 'circle' | 'glass' | 'minimal' | 'neon' | 'glass' | Arrow style for navigation controls. | | interval | number | 5000 | Autoplay interval in milliseconds. |

Slide Data Shape

| Field | Type | Required | Description | | --- | --- | --- | --- | | image | string | Yes | Image URL for the slide. | | title | string | No | Main slide headline. | | subtitle | string | No | Small uppercase label above title. | | description | string | No | Longer body text. | | tag | string | No | Small badge label shown in the top-left. | | cta | string | No | CTA button text. | | ctaClick | () => void | No | Optional click handler for CTA button. |

Data Source Examples

1) Data as an Array

const slides = [
  {
    image: '/images/slide-1.jpg',
    title: 'Studio Portraits',
    subtitle: 'Editorial',
    description: 'Soft light, modern layouts, timeless mood.',
  },
  {
    image: '/images/slide-2.jpg',
    title: 'Blue Hour',
    subtitle: 'Cityscape',
    description: 'Glass towers and a glowing skyline.',
  },
]

<AwesomeClassicSlider data={slides} />

2) JSON File (public folder)

Place a JSON file in your public/ folder (example: public/slides.json).

[
  {
    "image": "/images/slide-1.jpg",
    "title": "Seaside Calm",
    "subtitle": "Travel",
    "description": "Salt air and pastel skies."
  }
]

<AwesomeClassicSlider data="/slides.json" />

3) REST API URL

The API can return an array directly or an object that contains the array under data, slides, items, results, records, or payload.

<AwesomeClassicSlider data="https://api.example.com/slides" />

Styling

All component CSS is bundled into dist/style.css. Import it once in your app:

import 'react-awesome-classic-slider/style.css'