📸 Angular Tailwind Image Slider

A responsive and draggable image slider built with Angular and TailwindCSS.
Supports looping, drag-to-slide, auto-slide (toggleable), and responsive scaling.

🚀 Installation

1. Create Angular project

ng new my-project --style css or scss
cd my-project

2. Install Tailwind CSS

npm install tailwindcss @tailwindcss/postcss postcss --force

3. Configure PostCSS

Create a .postcssrc.json in the root of your project:

{
  "plugins": {
    "@tailwindcss/postcss": {}
  }
}

4. Add a classes file

Create a file named classes (no extension) inside your src folder and paste the following:

w-[95%] h-[200px] sm:h-[300px] md:h-[400px] lg:h-[450px] mx-auto overflow-hidden absolute top-1/2 left-5 -translate-y-1/2 bg-white rounded-full shadow

This ensures Tailwind will pick up the classes during build.

🛠 Usage

Import and use the SliderComponent in your Angular app.

📦 API (Inputs)

| Param | Type | Default | Description | |-------------|------------|---------|-------------------------------------| | images | string[] | [] | Array of image URLs to display | | duration | number | 3000 | Auto-slide interval in milliseconds | | autoSlide | boolean | true | Enables/disables auto-slide |

✅ Example Usage

<app-slider [data]="{ 
  images: ['assets/img1.jpg', 'assets/img2.jpg', 'assets/img3.jpg'], 
  duration: 4000,
  autoSlide: true
}"></app-slider>

🎉 Features

• Responsive design with TailwindCSS
• Drag to slide support
• Looping image carousel
• Configurable auto-slide
• Scale animation for focus