I'm using Angular 8 and https://www.npmjs.com/package/ngx-owl-carousel-o
I'm having a problem displaying the images, instead of showing images side by side in a carousel fashion it shows them full width above each other like so: https://i.stack.imgur.com/jtCDk.jpg
home.component.html
<owl-carousel-o [options]="customOptions">
<ng-container *ngFor="let slide of images">
<ng-template carouselSlide [id]="slide.id">
<img [src]="slide.image" [alt]="slide.alt" [title]="slide.title">
</ng-template>
</ng-container>
</owl-carousel-o>
home.component.ts
import { Component, OnInit } from '@angular/core';
import { OwlOptions } from 'ngx-owl-carousel-o';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
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
}
images = [
{
id: 1,
text: "Everfresh Flowers",
image: "https://freakyjolly.com/demo/jquery/PreloadJS/images/1.jpg"
},
{
id: 2,
text: "Festive Deer",
image: "https://freakyjolly.com/demo/jquery/PreloadJS/images/2.jpg"
},
{
id: 3,
text: "Morning Greens",
image: "https://freakyjolly.com/demo/jquery/PreloadJS/images/3.jpg"
}
]
constructor() { }
ngOnInit() {
}
}
angular.json
"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",
"src/styles.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.js"
]