dastgeer-carousel

dastgeer-carousel is an Angular library designed for creating image galleries with a modal viewer. It offers customizable navigation and various features to enhance your gallery experience.

Features

• Image Gallery: Display a collection of images with clickable thumbnails.
• Image Modal: View images in a modal with zoom in, zoom out, and download capabilities.
• Customizable Navigation: Easily customize the next and previous buttons with FontAwesome or other icons.

Installation

To use dastgeer-carousel, you'll need to install the following packages:

npm install @fortawesome/angular-fontawesome @fortawesome/free-solid-svg-icons

Usage

1. Import the Library

Import the necessary modules into your Angular project.

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { MainSliderComponent } from 'dastgeer-carousel';

@NgModule({
  imports: [
    MainSliderComponent,
    FontAwesomeModule,
    // other imports...
  ],
  // ...
})
export class AppModule { }

2. Add the Gallery and Image Modal

In your component template, use the library components to set up the gallery and image modal.

<div class="mt-5 flex justify-center gap-2">
  <div class="w-[20%]" *ngFor="let image of galleryImages; let i = index">
    <img 
      class="rounded-[20px] cursor-pointer" 
      [src]="image.small" 
      alt="Thumbnail" 
      (click)="imageModal.openModal(i)">
  </div>
</div>

<main-slider 
  [images]="galleryImages" 
  [prevButtonIcon]="faCircleChevronLeft" 
  [nextButtonIcon]="faCircleChevronRight" 
  #imageModal>
</main-slider>

3. Customize Navigation Buttons

You can customize the navigation buttons by passing any FontAwesome icon (or other icons) to the prevButtonIcon and nextButtonIcon inputs.

import { faCircleChevronLeft, faCircleChevronRight } from '@fortawesome/free-solid-svg-icons';

export class YourComponent {

     galleryImages = [
      {
        small: 'https://via.placeholder.com/600x400?text=Image+1'
      },
      {
        small: 'https://via.placeholder.com/600x400?text=Image+2'
      },
      {
        small: 'https://via.placeholder.com/600x400?text=Image+3'
      },
      {
        small: 'https://via.placeholder.com/600x400?text=Image+4'
      },
      {
        small: 'https://via.placeholder.com/600x400?text=Image+4'
      },
      // Add more images as needed
    ];

  faCircleChevronLeft = faCircleChevronLeft;
  faCircleChevronRight = faCircleChevronRight;
}

Code Scaffolding

To generate a new component within this library, run:

ng generate component component-name --project my-lib

You can also generate other Angular elements (e.g., directives, services) using:

ng generate directive|pipe|service|class|guard|interface|enum|module --project my-lib

Developed and managed by DastgeerTech Studio.