Angular Image Carousel. Simple image slideshow which cycles forwards/backwards through a set of images.
npm install noodle-ng-image-carouselAngular image carousel component. Simple image slideshow which cycles forwards/backwards through a set of images.
Initially built with Angular CLI v16.2.14.
Install with NPM using:
`` javascript`
npm install noodle-ng-image-carousel
Import the module and component to your app.module.ts
` javascript
import { NoodleNgImageCarouselModule } from 'noodle-ng-image-carousel';
@NgModule({
declarations: [
CarouselComponent
...
],
imports: [
NoodleNgImageCarouselModule
...
],
exports: [ ...],
providers: [ ... ],
bootstrap: [ ... ]
})
export class AppModule { }
`
Add the noodle-ng-image-carousel component to your component template.
` html
*ngIf="slides"
class="container">
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.` css
.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.` javascript
public slides: Array = [
{uri: "/assets/images/slide-red.png"},
{uri: "/assets/images/slide-green.png"},
{uri: "/assets/images/slide-blue.png"},
{uri: "/assets/images/slide-orange.png"}
]
`$3
Use
slideNext() and slidePrev() to move the slideshow without requiring user input e.g. with setTimeout(...)`.