Create Responsive Content Slider in Angular 11 with Owl Carousel 2

Angular 11 responsive content slider tutorial; Throughout this lesson, you will find how to create a responsive image and content carousel or slider in the Angular 11 application using the ngx-owl-carousel-o package.

Through this article, we would like to explain how to create a responsive Image slider in Angular not only but also how to create a responsive content slider in Angular with the help of a third-party library and that too in an exorbitantly easy manner.

Ideally, a carousel slider is a useful UI component. From the user experience outlook, it enhances user engagement by allowing numerous chunks of content (Text and Images) to occupy a single or coveted space. Users can view content in a cyclic view; moreover, in smaller devices or viewports, users tend t scroll past sliders or carousels.

Theoretically, the Owl Carousel 2 is the notable content slider available through the node package manager. It comes with innumerable features. We will try to enumerate some of the features to build a responsive image and content slider in Angular. Additionally, carousel customization is immensely easy with owl carousel to manage the content slider’s look and feel.

Angular 11 Owl Carousel Responsive Content Slider Example

  • Step 1: Install Angular App
  • Step 2: Install Ngx Owl Carousel Package
  • Step 3: Register CarouselModule in App Module
  • Step 4: Integrate Carousel CSS
  • Step 5: Implement Content Slider in Angular
  • Step 6: Dynamic Responsive Content and Image Slider
  • Step 7: Owl Carousel Methods and Events
  • Step 8: Run Angular App

Install Angular App

You have to install the Angular CLI to set up the Angular environment:

npm install -g @angular/cli

Next, install the angular app using the following command:

ng new ng-owl-carousel-demo

Move inside the app:

cd ng-owl-carousel-demo

Install Ngx Owl Carousel Package

Head over to console, execute the command to install and add Owl Carousel in the angular app:

npm install ngx-owl-carousel-o

Register CarouselModule in App Module

In the next step, you have to import CarouselModule and BrowserAnimationsModule and register in the imports array simultaneously in the app’s main app module file.

Consequently, insert the suggested code in the app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

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

import { CarouselModule } from 'ngx-owl-carousel-o';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    CarouselModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

Integrate Carousel CSS

Get inside the src/styles.scss or css file to integrate the owl carousel css in angular:

@import '~ngx-owl-carousel-o/lib/styles/scss/owl.carousel';
@import '~ngx-owl-carousel-o/lib/styles/scss/owl.theme.default';

Likewise, you can implement the carousel styling in angualr.json file:

"styles": [
  "src/styles.css",
  "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"            
],

Implement Content Slider in Angular

You can recklessly create a responsive content carousel in angular by adding owl-carousel-o directive, also attach options property with it. The ng-template directive takes a carouselSlide prop to invoke the image and content slider in angular.

Hence, add the following code in app.component.html file:

<owl-carousel-o [options]="owlOptions">
  <ng-template carouselSlide>
    <div class="slide">
      <img src="https://loremflickr.com/g/320/240/paris" alt="Content 1">
    </div>
  </ng-template>
  <ng-template carouselSlide>
    <div class="slide">
      <img src="https://loremflickr.com/320/240/dog" alt="Content 2">
    </div>
  </ng-template>
  <ng-template carouselSlide>
    <div class="slide">
      <img src="https://loremflickr.com/320/240/brazil,rio" alt="Content 3">
    </div>
  </ng-template>
  <ng-template carouselSlide>
    <div class="slide">
      <img src="https://loremflickr.com/320/240/paris,girl/all" alt="Content 4">
    </div>
  </ng-template>
</owl-carousel-o>

Open app.component.html file and define the owl options to create the simple content slider:

import { Component } from '@angular/core';
import { OwlOptions } from 'ngx-owl-carousel-o';

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

export class AppComponent {
  
  constructor() { }

  owlOptions: OwlOptions = {
    loop: true,
    mouseDrag: false,
    touchDrag: false,
    pullDrag: false,
    dots: false,
    navSpeed: 700,
    navText: ['&#8249', '&#8250;'],
    responsive: {
      0: {
        items: 1 
      },
      480: {
        items: 1
      },
      767: {
        items: 2
      },
      1024: {
        items: 3
      }
    },
    nav: true
  }

}

In the responsive property, we can define the breakpoints this way image slider work as per the device size:

Dynamic Responsive Content and Image Slider

So far, we have shown you how to show static content in the slider, but for now, we will go one step further and show you how to display dynamic images and text content in angular using owl options.

Open and update angular TypeScript template:

import { Component } from '@angular/core';
import { OwlOptions } from 'ngx-owl-carousel-o';

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

export class AppComponent {

  slideObject = [
     {
       id: 1,
       src:'https://loremflickr.com/g/320/240/paris',
       alt:'Carousel 1',
       title:'Carousel 1'
     },
     {
       id: 2,
       src:'https://loremflickr.com/320/240/dog',
       alt:'Carousel 2',
       title:'Carousel 2'
     },
     {
       id: 3,
       src:'https://loremflickr.com/320/240/brazil,rio',
       alt:'Carousel 3',
       title:'Carousel 3'
     },
     {
       id: 4,
       src:'https://loremflickr.com/320/240/paris,girl/all',
       alt:'Carousel 4',
       title:'Carousel 4'
     }
   ]
 
  constructor() { }

  owlOptions: OwlOptions = {
    loop: true,
    mouseDrag: false,
    touchDrag: false,
    pullDrag: false,
    dots: false,
    navSpeed: 750,
    navText: ['&#8249', '&#8250;'],
    responsive: {
      0: {
        items: 1 
      },
      400: {
        items: 2
      },
      767: {
        items: 2
      },
      1024: {
        items: 3
      }
    },
    nav: true
  }

}

Open and update angular HTML template:

<owl-carousel-o [options]="owlOptions">

  <ng-container *ngFor="let data of slideObject">
    <ng-template carouselSlide [id]="data.id">
      <img [src]="data.src" [alt]="data.alt" [title]="data.title">
    </ng-template>
  </ng-container>

</owl-carousel-o>

The images are displayed using the ngFor directive, which loops over every image and shows the image or the content slider in a cyclic view:

Owl Carousel Methods and Events

Similarly, you can define custom events and methods to enhance the carousel slider functionalities:

translated

The translated event is called right after the carousel’s translating event is over; it gets the initial slide and manifests the visible slide.

import { Component } from '@angular/core';
import { OwlOptions, SlidesOutputData } from 'ngx-owl-carousel-o';

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

export class AppComponent {

  currentSlide: SlidesOutputData;

  carouseldData(data: SlidesOutputData) {
    this.currentSlide = data;
    alert(JSON.stringify(this.currentSlide));
  }

  slideObject = [
     {
       id: 1,
       src:'https://loremflickr.com/g/320/240/paris',
       alt:'Carousel 1',
       title:'Carousel 1'
     },
     {
       id: 2,
       src:'https://loremflickr.com/320/240/dog',
       alt:'Carousel 2',
       title:'Carousel 2'
     },
     {
       id: 3,
       src:'https://loremflickr.com/320/240/brazil,rio',
       alt:'Carousel 3',
       title:'Carousel 3'
     },
     {
       id: 4,
       src:'https://loremflickr.com/320/240/paris,girl/all',
       alt:'Carousel 4',
       title:'Carousel 4'
     }
   ]
 
  constructor() { }

  owlOptions: OwlOptions = {
    loop: true,
    mouseDrag: false,
    touchDrag: false,
    pullDrag: false,
    dots: false,
    navSpeed: 750,
    navText: ['&#8249', '&#8250;'],
    responsive: {
      0: {
        items: 1 
      },
      400: {
        items: 2
      },
      767: {
        items: 2
      },
      1024: {
        items: 3
      }
    },
    nav: true
  }

}
<owl-carousel-o [options]="owlOptions" (translated)="carouseldData($event)">

  <ng-container *ngFor="let data of slideObject">
    <ng-template carouselSlide [id]="data.id">
      <img [src]="data.src" [alt]="data.alt" [title]="data.title">
    </ng-template>
  </ng-container>

</owl-carousel-o>

dragging

This event is invoked when the user begins dragging the slider items. To check out the dragging event example, make sure to set the drag option to true in owl options.

import { Component } from '@angular/core';
import { OwlOptions, SlidesOutputData } from 'ngx-owl-carousel-o';

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

export class AppComponent {

  owlDragging(e){
    console.log(e);
  }
  
  slideObject = [
     {
       id: 1,
       src:'https://loremflickr.com/g/320/240/paris',
       alt:'Carousel 1',
       title:'Carousel 1'
     },
     {
       id: 2,
       src:'https://loremflickr.com/320/240/dog',
       alt:'Carousel 2',
       title:'Carousel 2'
     },
     {
       id: 3,
       src:'https://loremflickr.com/320/240/brazil,rio',
       alt:'Carousel 3',
       title:'Carousel 3'
     },
     {
       id: 4,
       src:'https://loremflickr.com/320/240/paris,girl/all',
       alt:'Carousel 4',
       title:'Carousel 4'
     }
   ]
 
  constructor() { }

  owlOptions: OwlOptions = {
    loop: true,
    mouseDrag: true,
    touchDrag: true,
    pullDrag: true,
    dots: true,
    navSpeed: 750,
    navText: ['&#8249', '&#8250;'],
    responsive: {
      0: {
        items: 1 
      },
      400: {
        items: 2
      },
      767: {
        items: 2
      },
      1024: {
        items: 3
      }
    },
    nav: false
  }

}
<owl-carousel-o [options]="owlOptions" (dragging)="owlDragging($event)">

  <ng-container *ngFor="let data of slideObject">
    <ng-template carouselSlide [id]="data.id">
      <img [src]="data.src" [alt]="data.alt" [title]="data.title">
    </ng-template>
  </ng-container>

</owl-carousel-o>

initialized

The initialized event is evoked right after the carousel is initiated after the page gets loaded, it shows the starting slide along with total slides in a carousel:

import { Component } from '@angular/core';
import { OwlOptions, SlidesOutputData } from 'ngx-owl-carousel-o';

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

export class AppComponent {

  owlData(e: SlidesOutputData){
    console.log(e);
  }
  
  slideObject = [
     {
       id: 1,
       src:'https://loremflickr.com/g/320/240/paris',
       alt:'Carousel 1',
       title:'Carousel 1'
     },
     {
       id: 2,
       src:'https://loremflickr.com/320/240/dog',
       alt:'Carousel 2',
       title:'Carousel 2'
     },
     {
       id: 3,
       src:'https://loremflickr.com/320/240/brazil,rio',
       alt:'Carousel 3',
       title:'Carousel 3'
     },
     {
       id: 4,
       src:'https://loremflickr.com/320/240/paris,girl/all',
       alt:'Carousel 4',
       title:'Carousel 4'
     }
   ]
 
  constructor() { }

  owlOptions: OwlOptions = {
    loop: true,
    
    mouseDrag: true,
    touchDrag: true,
    pullDrag: true,
    dots: true,
    navSpeed: 750,
    navText: ['&#8249', '&#8250;'],
    responsive: {
      0: {
        items: 1 
      },
      400: {
        items: 2
      },
      767: {
        items: 2
      },
      1024: {
        items: 3
      }
    },
    nav: false
  }

}
<owl-carousel-o [options]="owlOptions" (initialized)="owlData($event)">

  <ng-container *ngFor="let data of slideObject">
    <ng-template carouselSlide [id]="data.id">
      <img [src]="data.src" [alt]="data.alt" [title]="data.title">
    </ng-template>
  </ng-container>

</owl-carousel-o>

Run Angular App

You have to ultimately start the angular development server, wherefore run the command to start the angular app:

ng serve

After executing the above command given url appears on the terminal, hence use it to test the app on the browser.

http://localhost:4200

Angular 11 Owl Carousel Content Slider Example