Owl Angular 中的轮播 7

Question

我在 Angular 7 中使用 Owl 轮播。首先我安装

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

然后添加

 "scripts": ["./node_modules/jquery/dist/jquery.min.js",
 "./node_modules/owl.carousel/dist/owl.carousel.min.js"]

在 angular.json 文件中并添加

import { OwlModule } from 'ngx-owl-carousel';
imports: [
 BrowserModule,
 OwlModule
]

在 app.module.ts 文件中然后我用了

public ngOnInit()
{
 /*----------------------------
        Slideshow
    ------------------------------ */
    $('.slideshow').owlCarousel({
      items: 6,
      autoPlay: 3000,
      singleItem: true,
      navigation: true,
      navigationText: ['<i class="fa fa-chevron-left"></i>', '<i class="fa fa-chevron-right"></i>'],
      pagination: true
  });
}

在 app.component.ts 文件中，但我有错误

core.js:14576 ERROR TypeError: jquery__WEBPACK_IMPORTED_MODULE_2__(...).owlCarousel is not a function

我错在哪里了？请帮我。谢谢。

Answer 1

导入 OwlModule 后，您可以在 Angular 模板中使用其导出的组件，如下所示（示例取自 github repo）：

   <owl-carousel
     [options]="{items: 3, dots: false, navigation: false}"
     <!-- If images array is dynamically changing pass this array to [items] 
     input -->
    [items]="images"
    <!-- classes to be attached along with owl-carousel class -->
      [carouselClasses]="['owl-theme', 'row', 'sliding']">
    <div class="item" *ngFor="let image of images;let i = index">
       <div class="thumbnail-image" [ngStyle]="{'background': 'url(abc.jpg) 
       no-repeat scroll center center / 80px 80px'}"></div>
    </div>
   </owl-carousel>

Answer 2

安装 jquery 和 owl 轮播

npm install --save jquery

npm install --save owl.carousel

在需要使用owl轮播的组件ts文件中导入库

import * as $ from 'jquery';
import "owl.carousel/dist/owl.carousel.min"
declare var $:any;

在全局样式表中导入 owl 轮播样式表 - styles.css

@import "~owl.carousel/dist/assets/owl.carousel.min";

Owl Angular 中的轮播 7

Owl carousel in Angular 7

owl-carousel

angular