NoodleNgImageCarousel

Angular image carousel component. Simple image slideshow which cycles forwards/backwards through a set of images. Initially built with Angular CLI v16.2.14.

Installation

Install with NPM using:

npm install noodle-ng-image-carousel

Usage

Import Module/Component

Import the module and component to your app.module.ts

import { NoodleNgImageCarouselModule } from 'noodle-ng-image-carousel';

@NgModule({
  declarations: [
    CarouselComponent
    ...
  ],
  imports: [
    NoodleNgImageCarouselModule
    ...
  ],
  exports: [ ...],
  providers: [ ... ],
  bootstrap: [ ... ]
})
export class AppModule { }

Add the component to your template

Add the noodle-ng-image-carousel component to your component template.

<div
    *ngIf="slides"
    class="container">
    <noodle-ng-image-carousel
        [imageSlides]="slides"></noodle-ng-image-carousel>
</div>

The noodle-ng-image-carousel component template should be placed in a div. The div controls how the carousel is rendered to the page. Use the following CSS as a guideline. The overflow-x: clip property of .container is key because the carousel uses margins to push images off the page to the left/right. The oveflow property hides this.

.container {
    display: block;
    position: relative;
    left: 0;
    right: 0;
    height: 555px;
    margin: 0 -10px;
    overflow-x: clip;
}

@media only screen and (max-width: 767px){
    .container {
        height: 380px;
    }
}

@media only screen and (max-width: 991px){
    .container {
        height: 450px;
    }
}

The slides property of the component is an array of NoodleNgImageSlide which will be bound to the carousel at run-time. The slides property expects a minimum of 3 slides.

  public slides: Array<any> = [
    {uri: "/assets/images/slide-red.png"},
    {uri: "/assets/images/slide-green.png"},
    {uri: "/assets/images/slide-blue.png"},
    {uri: "/assets/images/slide-orange.png"}
  ]

Automating next/previous

Use slideNext() and slidePrev() to move the slideshow without requiring user input e.g. with setTimeout(...).

Angular Versions

| Version | Angular Version | | --- | --- | | 1.0.18 | ^18.0.0 | | 1.0.0-rc2 | ^17.0.0 | | 1.0.0-rc1 | ^16.0.0 |