`

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(...)`.

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 |