ngx-carouselx v0.0.8

NGX CAROUSELX

a simple carousel that supports latest angular versions and easy to use.

Features

• NgxCarouselx has no dependencies besides angular. All animations are 100% CSS, so @angular/animations is not needed.
• Responsive and captures swipes from phones and tablets
• Lazy load option to help with initial pageload speed

History

This project is a fork and continuation of the now-discontinued ng-simple-slideshow created by Richard Jeffords. Our current focus is to maintain package security and ensure compatibility with the latest Angular version. We welcome pull requests, including bug fixes, upgrades, and enhancements to the component.

Installation

Easy, just npm install:

npm i ngx-carouselx

Next, import the standalone carousel component:

import { CarouselComponent } from 'ngx-carouselx';

@Component({
  ...
  imports: [
    CarouselComponent,
    ...
  ],
  ...
})
...

Usage

The simplest use case is the following:

<carouselx [imageUrls]="imageUrlArray"></carouselx>

A more complex example below (full list of options in next section):

<carouselx [height]="height"
           [minHeight]="'525px'"
           [autoPlay]="true"
           [showArrows]="false"
           [imageUrls]="imageSources"
           [lazyLoad]="imageSources?.length > 1"
           [autoPlayWaitForLazyLoad]="true">
</carouselx>

Options

Inputs

Output Events

Note: all events emit the index number of the new slide, with the exception of onClick which returns the slide object in addition to the index.

API

Take control of the ngx-carouselx if you want! Simply create a reference to your carousel like so:

<carouselx #carousel [imageUrls]="imageUrlArray"></carouselx>

and in your component.ts reference it as a ViewChild:

@ViewChild('carousel') carousel: any;

Now you can access the public members such as the goToSlide and onSlide:

this.carousel.goToSlide(3); // go to slide index 3 (i.e. imageUrls[3])

this.carousel.onSlide(1); // next slide

this.carousel.onSlide(-1); // previous slide