Я уже применил 3-4 карусели для проекта angular 8, используя api, но до сих пор не получил никакого результата. Мне нужен слайдер продукта с использованием API в угловой версии 8
Сова Каруэль Слайдер изображения: npm i ngx-owl-carousel-o
Добавлено в module.ts:
import { CarouselModule } from 'ngx-owl-carousel-o';
imports: [
CarouselModule,
...
]
home.component.ts:
customOptions: any = {
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
}
home.component.html:
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
<div>Some tags before</div>
<owl-carousel-o [options]="customOptions">
<ng-template carouselSlide><img src="https://jaxenter.de/wp-content/uploads/2016/01/angularjs_2_0-log-500x375.jpg"></ng-template>
<ng-template carouselSlide><img src="https://jaxenter.de/wp-content/uploads/2016/01/angularjs_2_0-log-500x375.jpg"></ng-template>
<ng-template carouselSlide><img src="https://jaxenter.de/wp-content/uploads/2016/01/angularjs_2_0-log-500x375.jpg"></ng-template>
<ng-template carouselSlide><img src="https://jaxenter.de/wp-content/uploads/2016/01/angularjs_2_0-log-500x375.jpg"></ng-template>
<ng-template carouselSlide><img src="https://jaxenter.de/wp-content/uploads/2016/01/angularjs_2_0-log-500x375.jpg"></ng-template>
</owl-carousel-o>
<div>Some tags after</div>
</div>
Ошибка:
localhost/:17 GET http://localhost:4200/node_modules/jquery/dist/jquery.js net::ERR_ABORTED 404 (Not Found)
localhost/:18 GET http://localhost:4200/node_modules/owl.carousel/dist/owl.carousel.js net::ERR_ABORTED 404 (Not Found)
util.js:55 Uncaught TypeError: Cannot read property 'fn' of undefined
at util.js:55
at bootstrap.min.js:6
at bootstrap.min.js:6