Карусель для сов в Ангуляр 7 - PullRequest
Новая
       7

Карусель для сов в Ангуляр 7

0 голосов
/ 09 декабря 2018

Я использую Карусель Owl в Angular 7. Сначала я устанавливаю С 

 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 ОШИБКА TypeError: jquery__WEBPACK_IMPORTED_MODULE_2 __ (...). owlCarousel не является функцией

где я ошибаюсь?Пожалуйста, помогите мне.Благодарю.

1 Ответ

0 голосов
/ 09 декабря 2018

После импорта 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>
...