Ng2CustomCarousel

Carousel component for Angular 2+. Easily customizable, with autoscroll, loop and navigation controls. List of features

• Easily customizable.
• Autoscroll.
• Continuous loop.
• Navigation indicators and controls.
• Customizable number of visible slides.
• Customizable direction of scroll.
• Customizable speed of scroll.
• Slides margins.

Examples/Demo

• Live Demo: https://www.ritxweb.com/ng2carousel/

Installation

npm i ng2-custom-carousel

API

import { Ng2CustomCarouselModule } from 'ng2-custom-carousel'; selector: ng2-custom-carousel

@Inputs()

| Input | Type | Required | Description | | ---------------- | ------- | ---------------------------------- | -------------------------------------------------------------------------------------------- | | timing | string | Optional, default: '250ms ease-in' | the time and type of transition between slides. | | showControls | boolean | Optional, default: true | if true shows the 'next' and 'prev' navigation controls. | | showNavigation | string | Optional, default: 'radio' | choose the type of navigation indicators between 'radio', 'numbers' or 'none' | | autoScroll | number | Optional, default: 0 | number of milliseconds between navigation of slides automatically, 0 for no auto navigation. | | loop | boolean | Optional, default: true | if true the carousel runs in continuous loop. | | slidesN | number | Optional, default: 0 | max number of slides to show, 0 to show all the slides possible. | | scrollDirection | string | Optional, default: 'left' | choose the direction of the autoscroll between 'left' or 'right'. | | slidesMargin | number | Optional, default: 0 | number of pixels of margin between slides. |

Usage

1. Register the Ng2CustomCarouselModule in your app module.

import { Ng2CustomCarouselModule } from 'ng2-custom-carousel';'

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';
import { Ng2CustomCarouselModule } from 'ng2-custom-carousel';

@NgModule({
 declarations: [
   AppComponent
 ],
 imports: [
   BrowserModule,
   BrowserAnimationsModule,
   Ng2CustomCarouselModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

2. Use the selector (ng2-custom-carousel) in your component.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div class="ng2-custom-carousel-container">
      <ng2-custom-carousel timing="400ms ease-in" [showControls]="true" [autoScroll]="2000" showNavigation="radio"
        [slidesN]="4" [loop]="true" scrollDirection="left" [slidesMargin]="100">
        <ng-container *ngFor="let item of ng2CusomCarouselItems;">
          <ng-container *ng2CustomCarouselItem>
            <div class="ng2-custom-carousel-element">
              <!-- PLACE HERE YOUR SLIDE CONTENT -->
              {{item.title}}
            </div>
          </ng-container>
        </ng-container>
      </ng2-custom-carousel>
    </div>
  `,
  styles:[`
    .ng2-custom-carousel-container {
      width: 100%;
      margin: auto;
    }

    .ng2-custom-carousel-element {
      padding: 0;
      width: 300px;
      height: 300px;
      background-color: crimson;
      color: #fff;
      font-size: 50px;
      line-height: 300px;
      text-align: center;
    }
  `]
})
export class AppComponent {
  ng2CustomCarouselItems = [
    { title: 'Slide 1' },
    { title: 'Slide 2' },
    { title: 'Slide 3' },
    { title: 'Slide 4' },
    { title: 'Slide 5' },
    { title: 'Slide 6' },
    { title: 'Slide 7' },
    { title: 'Slide 8' },
    { title: 'Slide 9' },
    { title: 'Slide 10' },
    { title: 'Slide 11' }
  ];
}

Running the example in local env

• npm i
• ng build ng2-custom-carousel
• Run ng serve for a dev server and running the demo app. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Build the Ng2CustomCarousel module

Run ng build ng2-custom-carousel to build the module. The build artifacts will be stored in the dist/ng2-custom-carousel directory.

Running unit tests

Run ng test ng2-custom-carousel to execute the unit tests via Karma.

License

This project is licensed under the GNU General Public License v3.0.

Credits

To my families.