angular - ngx-owl-carousel-o 选项自动播放真的不起作用?
问题描述
我需要帮助这个自动播放如何让它工作。我写了这个问题,因为我找不到和我一样的问题。我真的需要你的眼睛看到错过或错过的东西。提前谢谢大家。
审查section.component.html
<div class="section section-review">
<div class="container-fluid">
<div class="container custom">
<owl-carousel-o [options]="carouselOptions">
<ng-template carouselSlide>
<img src="./assets/img/faces/joe-gardner-2.jpg">
</ng-template>
<ng-template carouselSlide>
<img src="./assets/img/faces/joe-gardner-2.jpg">
</ng-template>
<ng-template carouselSlide>
<img src="./assets/img/faces/joe-gardner-2.jpg">
</ng-template>
<ng-template carouselSlide>
<img src="./assets/img/faces/joe-gardner-2.jpg">
</ng-template>
</owl-carousel-o>
</div>
</div>
</div>
审查section.component.ts
import { Component, OnInit } from '@angular/core';
import { OwlOptions } from 'ngx-owl-carousel-o';
@Component({
selector: 'app-review-section',
templateUrl: './review-section.component.html',
styleUrls: ['./review-section.component.css']
})
export class ReviewSectionComponent implements OnInit {
constructor() { }
carouselOptions: OwlOptions = {
nav: false,
loop: true,
mouseDrag: true,
touchDrag: true,
pullDrag: true,
dots: false,
autoplay: true,
navSpeed: 700,
navText: ['', ''],
responsive: {
0: {
items: 1
},
400: {
items: 2
},
740: {
items: 3
},
940: {
items: 4
}
},
}
ngOnInit(): void {
}
}
角.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.scss
@import '../node_modules/ngx-owl-carousel-o/lib/styles/scss/owl.carousel.scss';
@import '../node_modules/ngx-owl-carousel-o/lib/styles/scss/owl.theme.default.scss';
解决方案
尝试这个....
<ng-template carouselSlide class="item">
<img src="./assets/img/faces/joe-gardner-2.jpg">
</ng-template>
.....在每个 ng 模板上
推荐阅读
- python - 当数组的数量由循环形成时,如何连接每个元素的这些数组?
- html - Bootstrap中两行下方的巨大空间
- javascript - 将 div[overflow: hidden] 中的矩形强制移到右侧
- firebase - 如何避免竞争条件?
- makefile - 测试 python3 是否安装在 Makefile 中
- typescript - 如何为原型中定义的方法实现类的接口?
- c# - 如何在 DropDownListFor 中设置值?
- java - 八进制到十进制帮助使用异常
- c# - 此请求的授权已被拒绝:JWT Bearer
- rust - 如何将 take_while 与 futures::Stream 一起使用?