Create your account

Already have an account? Login here

Create account

A Quick and Easy Angular Carousel in a Few Minutes (Angular 2 and 4+)

By Gary simon - Jul 09, 2017

Carousels exist on the frontend for multiple use-cases, such as galleries and featuring multiple instances of repeating content.

If you're working within an Angular 2+ project, you might need a carousel. Fortunately, I just tested out an Angular Carousel package that seems to get the job done!

So, in this tutorial, I'm going to show you exactly how to install and use it. Let's get started.

If you prefer watching a video..

Please Subscribe to the Official Coursetro Youtube channel for more awesome videos.

Starting the Project

First, be sure you have the latest version of the Angular CLI:

$ npm install @angular/cli@latest

Then, we'll use it to start a new Angular project (mine will be installing an Angular 4.2 project):

$ ng new carousel --style=scss
$ cd carousel

Installing the Carousel Package

Now that we're in our new project folder, let's install the actual carousel package:

$ npm install ng2-carouselamos --save

Once installed, run:

$ ng serve

In the project, using your preferred code editor, we have to import the package to our /src/app/app.module.ts file:

import { Ng2CarouselamosModule } from 'ng2-carouselamos';
...
@NgModule({
  ...
  imports: [
    ...
    Ng2CarouselamosModule
  ],
  ...
})

That's all there is to the installation process! We don't even have to import it within any of the component files from which we wish to integrate a carousel.

Giving it a Go

Let's create our own version of a carousel using this package. 

In our /src/app/app.component.html file, let's add the following:

    <div id="container">
      <div
        ng2-carouselamos
        class="slides-wrapper"
        [items]="items"
        [width]="900"
        [$prev]="prev"
        [$next]="next"
        [$item]="item"
      >
      </div>
    

    <ng-template #prev>
      <img src="assets/images/left-arrow.png" id="left" />
    </ng-template>
    <ng-template #next>
      <img src="assets/images/right-arrow.png" id="right" />
    </ng-template>
    <ng-template #item let-item let-i="index">

        <div class="items">
          <img src="{{ item.name }}">
        </div>

    </ng-template>

The second div is what defines our carousel, as we're adding the name ng2-carouselamos directive. We're also using several property bindings to define the various aspects of the carousel:

  • [items] - This is the property that we will define in the component, and it will iterate through this array to form the actual items in the carousel.
  • [width] - The width in pixels. This will break if you attempt to specify a percentage.

The next three are property bindings bound to local variables defined in ng-template's below.

  • #prev & #next are simply for defining the UI elements for the previous and next buttons in the carousel.
  • #item defines the template for each individual carousel item.

In our case, we're using interpolation inside of an img tag to define the image location.

Let's define the item property in our component class file /src/app/app.component.ts:

export class AppComponent {
  items: Array<any> = []

  constructor() {
    this.items = [
      { name: 'assets/images/thumb1.png' },
      { name: 'assets/images/thumb2.png' },
      { name: 'assets/images/thumb3.png' },
      { name: 'assets/images/thumb4.png' },
      { name: 'assets/images/thumb5.png' },
      { name: 'assets/images/thumb6.png' },
      { name: 'assets/images/thumb1.png' },
      { name: 'assets/images/thumb2.png' },
      { name: 'assets/images/thumb3.png' },
      { name: 'assets/images/thumb4.png' },
      { name: 'assets/images/thumb5.png' },
      { name: 'assets/images/thumb6.png' },
    ]
  }
}

In the /assets/images folder, I placed 6 thumb png files at 500x500px each. I've also included the necessary left-arrow.png and right-arrow.png from this source.

The actual items array, for now, is just defining image locations, but this array of objects could include any information that you could display through interpolation within your carousel.

Let's give our carousel some style, /src/app/app.component.scss:

#container {
    width: 100%;
    margin: 5em auto;
    padding: 0;
    background:#fff;
}

.items {
    max-width:300px;
    height:300px;
    background:#ECECEC;
}

#left, #right { 
    margin: 30px;
}

The way in which you control the # of items that are displayed in the carousel, is based on the [width] you set in the template, and the min-width / max-width you set on the .items class, so beware of that!

Also, in /src/styles.scss:

body {
    background: #ECECEC;
}

Assuming you have ng serve running still, go ahead and check out the result in your browser!

Conclusion

This example was a simple image gallery carousel, but it could be much more complex if we added more HTML inside of the item template. It will work perfectly fine in either scenario.

Hopefully you found this tutorial helpful. If so, give us a comment!


Share this post

Chat with us




Say something about this awesome post!