首页 > 解决方案 > 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';

标签: angularowl-carousel

解决方案


尝试这个....

<ng-template carouselSlide class="item">
   <img src="./assets/img/faces/joe-gardner-2.jpg">
 </ng-template>

.....在每个 ng 模板上


推荐阅读