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:

1npm install noodle-ng-image-carousel

Usage

Import Module/Component

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

1import { NoodleNgImageCarouselModule } from 'noodle-ng-image-carousel';
2
3@NgModule({
4  declarations: [
5    CarouselComponent
6    ...
7  ],
8  imports: [
9    NoodleNgImageCarouselModule
10    ...
11  ],
12  exports: [ ...],
13  providers: [ ... ],
14  bootstrap: [ ... ]
15})
16export class AppModule { }

Add the component to your template

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

1<div
2    *ngIf="slides"
3    class="container">
4    <noodle-ng-image-carousel
5        [imageSlides]="slides"></noodle-ng-image-carousel>
6</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.

1.container {
2    display: block;
3    position: relative;
4    left: 0;
5    right: 0;
6    height: 555px;
7    margin: 0 -10px;
8    overflow-x: clip;
9}
10
11@media only screen and (max-width: 767px){
12    .container {
13        height: 380px;
14    }
15}
16
17@media only screen and (max-width: 991px){
18    .container {
19        height: 450px;
20    }
21}

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.

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

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