Angular 16 OWL Carousel Slider Example Tutorial

Owl Carousel Slider for Angular is a popular tool that helps you create interactive slideshows in your Angular apps. It’s like a special box to hold pictures, videos, or other things you want to display. You can show it differently on the big screen and a small screen.

With Owl Carousel, you can display multiple items in a row and slide them horizontally or vertically. People use it a lot to create image galleries, product slideshows and customer testimonials on websites.

Owl Carousel for Angular is called by some as ngx-owl-carousel. It is built and supported by a community of developers who want to make it easier to use Owl Carousel with Angular. This gives you special Angular snippets that you can use to build your slideshow without the need to deal with complicated jQuery stuff.

So, In this tutorial, you will learn how to install, integrate and use owl carousel in angular 16 projects using ngx-owl-carousel-o npm.

Owl Carousel Slider Example in Angular 16

Steps to install, integrate and use the owl carousel slider in angular 16 projects using ngx-owl-carousel-o npm:

• Step 1 – Set Up the Angular Project
• Step 2 – Install Owl Carousel
• Step 3 – Import the Required Modules
• Step 4 – Use Owl Carousel Slider in HTML Tamplate
• Step 5 – Set Up Image Data
• Step 6 – Start the Angular App

Step 1 – Set Up the Angular Project

First of all, open your cmd or command prompt and execute the following command on it to install and create a new Angular project using angular cli:

ng new my-new-app

Step 2 – Install Owl Carousel

Once you have set up a new angular project in your system. Now, you need to install the NPM package called ngx-owl-carousel-o –save for installation and use the owl carousel in angular projects. So, You can install the packages by executing the following commands on the terminal:

npm install jquery --save
npm install ngx-owl-carousel-o

After that, open the angular.json file and update the following code in it:

...
"styles": [
    "node_modules/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.carousel.min.css",
    "node_modules/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.theme.default.min.css",
],
"scripts": [
  "node_modules/jquery/dist/jquery.min.js",
]
....

Step 3 – Import the Required Modules

Next, you need to import the required modules in the app.module.ts File.

So, Open the ‘app.module.ts’ file and import the required modules:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
  
import { AppComponent } from './app.component';
import { CarouselModule } from 'ngx-owl-carousel-o';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    CarouselModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4 – Use Owl Carousel Slider in HTML Tamplate

Now, you need to display the images in owl carousel slider. So, visit src/app/ and app.component.html and add the Owl Carousel code into it:

<h1>Angular 16 Owl Carousel Integration Tutorial - Tutsmake.com</h1>
  
<owl-carousel-o [options]="customOptions">
  
<ng-container *ngFor="let slide of slides">
  <ng-template carouselSlide [id]="slide.id">
    <img [src]="slide.img" >
  </ng-template>
</ng-container>
  
</owl-carousel-o>

Step 5 – Set Up Image Data

Next, you need to set up image URLs to display images in owl carousel slider.

So, Visit the src/app directory and open app.component.ts. Then add the following code into component.ts file:

import { Component } from '@angular/core';
import { OwlOptions } from 'ngx-owl-carousel-o';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'ng-carousel-demo';
  
  customOptions: OwlOptions = {
    loop: true,
    mouseDrag: false,
    touchDrag: false,
    pullDrag: false,
    dots: false,
    navSpeed: 700,
    navText: ['', ''],
    responsive: {
      0: {
        items: 1
      },
      400: {
        items: 2
      },
      740: {
        items: 3
      },
      940: {
        items: 4
      }
    },
    nav: true
  }
  
    slides = [
      {id: 1, img: "https://dummyimage.com/350x150/423b42/fff"},
      {id: 2, img: "https://dummyimage.com/350x150/2a2b7a/fff"},
      {id: 3, img: "https://dummyimage.com/350x150/1a2b7a/fff"},
      {id: 4, img: "https://dummyimage.com/350x150/7a2b7a/fff"},
      {id: 5, img: "https://dummyimage.com/350x150/9a2b7a/fff"},
      {id: 6, img: "https://dummyimage.com/350x150/5a2b7a/fff"},
      {id: 6, img: "https://dummyimage.com/350x150/4a2b7a/fff"}
    ];
}

Step 6 – Start the Angular App

Finally, execute the following command on cmd to start angular owl carousel project:

ng serve

Now, open your browser and visit ‘http://localhost:4200’. You should see the Angular Owl Carousel Example page with the image carousel displaying the images in a sliding format.

Conclusion

Congratulations! You have successfully integrated Owl Carousel with Angular to create a simple image carousel. You can further customize the carousel’s appearance and behavior by exploring the available options in the Owl Carousel documentation.

Recommended Angular Tutorials