首页 文章

Angular 7中的猫头鹰旋转木马

提问于
浏览 次
0

我在Angular 7中使用Owl旋转木马 . 首先我安装With

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不是函数

我在哪里弄错了？请帮我 . 谢谢 .

angular owl-carousel

1 回答

  • 2

    导入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>
    回复于

相关问题