Angular

Building Responsive Carousel Slider In Angular 9

In this article, we will learn how to build a responsive carousel slider in Angular 9.

The Carousel plugin is a component for cycling through elements, like a slideshow.

Prerequisites:

  • Basic knowledge of Angular
  • Code editor like Visual Studio Code

Create a new Angular project by typing the following command in the VSCode terminal.

ng new carousel

Now, open the newly created project and execute the command given below.

npm install ngx-owl-carousel owl.carousel jquery

It will install 3 different packages:

  • ngx-owl-carousel is used for the rich carousel feature of jQuery to get integrated with Angular.
  • owl.carousel is the main package where the actual task performs.
  • jquery is needed for the main Owl carousel to work.

Now, we have to reference all packages path in the angular.json file.

Note: Make sure you reference it under the build node.

"styles": [
  "src/styles.css",
  "./node_modules/owl.carousel/dist/assets/owl.carousel.min.css",
  "./node_modules/owl.carousel/dist/assets/owl.theme.default.min.css"
],
"scripts": [
  "./node_modules/jquery/dist/jquery.min.js",
  "./node_modules/owl.carousel/dist/owl.carousel.min.js"
]

Open the app.module.ts file and add the code in it.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { OwlModule } from 'ngx-owl-carousel';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    OwlModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Open the app.component.ts file and add the code in it.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  slideOptions = {
    nav: true,
    dots: true,
    loop: false,
    margin: 10,
    responsiveClass: true,
    // responsive object contains responsive options.
    responsive: {
      0: {
        items: 1,
        dots: false
      },
      600: {
        items: 3
      },
      1000: {
        items: 4
      }
    }
  };

  images = [
    'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQGpg4fYucfTrzefpz53O7sG3TMm76s8FkNnoc0kViB0bOflsO8&s',
    'https://img.freepik.com/free-photo/macro-picture-half-soap-bubble-look-like-planet-space_58717-343.jpg?size=626&ext=jpg',
    'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYgtlo6yCU3PuboMjxF1n5eQ2SXch8htElZEwaB9dN0AGiA-Vm&s',
    'https://wallpaperaccess.com/full/1622642.jpg',
    'https://wallpapers.moviemania.io/phone/movie/299534/89d58e/avengers-endgame-phone-wallpaper.jpg?w=1536&h=2732',
    'https://wonderfulengineering.com/wp-content/uploads/2016/02/wallpaper-background-2.jpg',
    'https://cutewallpaper.org/21/wallpaper-images-hd/Nature-Wallpapers-Pexels-Free-Stock-Photos.jpeg'
  ];

}

Open the app.component.html file and add the code in it.

<owl-carousel [options]="slideOptions" [carouselClasses]="['owl-theme', 'sliding']">
  <div class="item" *ngFor="let image of images">
    <div>
      <img [src]="image" height="200px">
    </div>
  </div>
</owl-carousel>

Output:

 

Please give your valuable feedback and if you have any questions or issues about this article, please let me know.

Also, check How To Implement Lazy Loading Module In Angular 9

Yasin Panwala

Yasin Panwala is a Web Developer and Author at TheCodeHubs. He has experience in Web Developing and Designing and also in Writing. He has got his skills in working on technologies like .NET Core, ADO.NET, AJAX, Angular, AngularJS, ASP.NET, ASP.NET MVC, Bootstrap, C#, CSS, Entity Framework, Express.js, GraphQL, HTML, JavaScript, JQuery, JSON, LINQ, Microsoft Office, MongoDB, MySQL, Node.js, PostgreSQL, SQL, SQL Server, TypeORM, TypeScript, Visual Basic .NET, Web API. He also got his skills in working with different integration and some known versioning tools. He is always ready to learn new things and he always tries his best on tasks that are assigned to him and gives the best possible outputs.

View Comments

  • Thanks your code is working perfectly, but please how can i make it automatic instead of just slider or clicking on the dot to move to the next page.

    Thanks i will be expecting your reply thanks

Recent Posts

Testing hk

Testing

2 years ago

Create and Used PIPE in angular

In this article, we have to show Create and Used PIPE in angular

2 years ago

Operation

Testing

2 years ago

Create and Used PIPE in angular

In this article, we have to show Create and Used PIPE in angular

2 years ago

Create and Used PIPE in angular

In this article, we have to show Create and Used PIPE in angular

2 years ago

TETS NEW

test

2 years ago