@atom-design-mog/moglix-carousel

A modern, auto-playing, fully responsive React Native Carousel built for the Atom Design System (Moglix). Supports image banners, color slides, text overlays, dots navigation, and an animated progress bar.

📦 Installation

Install with npm:

npm install @atom-design-mog/moglix-carousel

Or with yarn:

yarn add @atom-design-mog/moglix-carousel

🚀 Basic Usage

import MoglixCarousel from '@atom-design-mog/moglix-carousel';

export default function Home() {
  const slides = [
    { content: 'Welcome To Moglix', background: '#d9232d' },
    { background: 'https://cdn.moglix.com/banner1.png' },
    { background: 'https://cdn.moglix.com/banner2.png' },
    { content: 'Thank You!', background: '#d9232d' },
  ];

  return (
    <MoglixCarousel slides={slides} autoPlay autoPlayInterval={3000} />
  );
}

🎞 Slide Format

Each slide supports either a solid color or an image background.

Color slide example:

{ content: 'Welcome', background: '#d9232d' }

Image slide example:

{ background: 'https://cdn.moglix.com/cms/your-image.png', content: 'Big Sale!' }

🧩 Component Props

| Prop | Type | Default | Description | | -------------------- | --------- | ------- | -------------------------------------------- | | slides | Array | [] | List of slides (image/color + optional text) | | autoPlay | boolean | true | Enables automatic sliding | | autoPlayInterval | number | 3000 | Time (ms) before moving to next slide |

✨ Features

• Auto-play with smooth transitions
• Looping carousel behavior
• Touch-enabled (swipe left / right)
• Animated progress bar per slide
• Dots navigation with active state
• Supports image banners and solid color slides
• Text overlay on images
• Fully responsive and adapts to device width
• Works inside or outside ScrollView

🧪 Test Screen Example

import React from 'react';
import { View, Text } from 'react-native';
import MoglixCarousel from '@atom-design-mog/moglix-carousel';

export default function TestCarouselScreen() {
  const slides = [
    { content: 'Welcome To Moglix', background: '#d9232d' },
    { background: 'https://cdn.moglix.com/cms/flyout/Image_2025-11-17_12:26:40.392_Konica_Minolta_Platinum_pwa1.png' },
    { background: 'https://cdn.moglix.com/cms/flyout/Image_2025-11-17_12:24:49.838_Singhal-Platinum-pwa.png' },
    { background: 'https://cdn.moglix.com/cms/flyout/Image_2025-11-17_12:26:41.002_vinspire_Platinum_pwa1.png' },
    { content: 'Thank You!', background: '#d9232d' },
  ];

  return (
    <View style={{ flex: 1, backgroundColor: '#fff' }}>
      <View style={{ padding: 16 }}>
        <Text style={{ fontSize: 18, fontWeight: '600' }}>Carousel Component</Text>
      </View>

      <MoglixCarousel slides={slides} autoPlay autoPlayInterval={3000} />

      <View style={{ padding: 16 }}>
        <Text>Below Carousel Content...</Text>
      </View>
    </View>
  );
}

📁 Slide Object Structure

type Slide = {
  background: string; // Image URL OR Color like '#d9232d'
  content?: string;   // Optional overlay text
}

📸 Notes

• Supports JPG / PNG / WebP banners and full-width images. The component calculates height from device width for consistent aspect ratio.
• If you need different aspect ratios or custom slide heights, wrap the component or modify styles as needed.

👤 Author

Avi Gupta