2

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"
            ]
JonnyD
  • 73
  • 2
  • 9

0 Answers0