Angular owl carousel example

The following is a basic and most common to use carousel in angular.

HTML

<owl-carousel [options]="mySlideOptions" [items] [carouselClasses]="['owl-theme', 'sliding']">
    <div class="item"><img src="assets/img/banner-1.jpg" alt=""></div>
    <div class="item"><img src="assets/img/banner-2.jpg" alt=""></div>       
  </owl-carousel> 

.ts

import { Component, OnInit } from '@angular/core';
import * as $ from "jquery";
import "owl.carousel";
@Component({
  selector: 'app-mfindex-new',
  templateUrl: './mfindex-new.component.html',
  styleUrls: ['./mfindex-new.component.scss']
})
export class MfindexNewComponent implements OnInit {
  mySlideOptions = { items: 1, dots: true, nav: false, margin: 15, autoplay:true };
  testimonials  = { items: 1, dots: true, nav: false, margin: 15, autoplay:true };
  constructor() { }

  ngOnInit() {
  }

}

Angular.json

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

You can customize this code further as per your requirement.

Angular Owl Carousel/Slider Example Tutorial.

Step 1: Create New App. ng new myNewApp.
Step 2: Install npm Package. Now in this step, we need to just install jquery and ngx-owl-carousel-o in our angular application.
Step 3: Import CarouselModule.
Step 4: Update Ts File.
Step 5: Update HTML File.

---

Learn HTML/CSS from W3 School Website

• JavaScript