0

亲爱的 Typescript 专家，我正在使用 NGX-owl-carousel-o 在我的 Angular 项目中显示触摸拖动项目轮播。我已将代码实现为剪切。问题是当打开它时，页面上没有显示轮播，直到我使用它显示的最小化和最大化按钮调整浏览器的大小。

我希望尽快得到解决方案并解决这个问题。

在调整屏幕大小之前 - ngx-owl-carousel-o 不起作用

调整屏幕大小后 - ngx-owl-carousel-o 工作正常

import { Component, OnInit } from '@angular/core';
import {OwlOptions} from "ngx-owl-carousel-o";


@Component({
  selector: 'app-xl-slider',
  templateUrl: './xl-slider.component.html',
  styleUrls: ['./xl-slider.component.scss']
})
export class XlSliderComponent implements OnInit {
     // Slider Responsive


  constructor() {

  }  // End Constructor

  // ngx-owl-carousel
  XlSlider: OwlOptions = {
    loop: true,
    mouseDrag: true,
    touchDrag: true,
    pullDrag: false,
    margin: 10,
    dots: false,
    autoWidth: true,
    autoHeight: true,
    navSpeed: 800,
    navText: ['', ''],
    nav: false,
    items: 20,
    autoplay: true,
    autoplayHoverPause: true,
    autoplayTimeout: 8000,
    autoplaySpeed: 5000,
    responsive: {
      0: {
        items: 1
      },
      400: {
        items: 1
      },
      740: {
        items: 1
      },
      940: {
        items: 1
      },
      1440: {
        items: 1
      },
      2640: {
        items: 1
      }
    },

  }
  ngOnInit(): void {

  }
}
// Dashboard Grid
.grid-container {
    margin: 20px;
}

.slider-card {
    position: absolute;
    // top: 15px;
    // left: 15px;
    // right: 15px;
    // bottom: 15px;
}
:host::ng-deep .mat-card {
  padding: 0;
}
.more-button {
    position: absolute;
    top: 5px;
    right: 10px;
}
.zero-o {
  width: 100%;
  height: 100%;
}

.slider-card-content {
    text-align: center;
}

// .owl-carousel {
//     width: 100%;
//     height: 100%;
//     padding: 15px;
//     z-index: -2;
// }
// Section radius
.section-radius {
    border-radius: 12px;
    margin-top: 1%;
    padding: 1%;
}

// Zero margin and zero padding
.main-slider-container {
    width: 100%;
    height: 90%;
    z-index: 3;
    align-items: center;
    display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}

// 100% width and height
.full-space {
  width: 100%;
  height: 100%;
}
        <mat-grid-list cols="12" rowHeight="1:1" gutterSize="6px">
        <mat-grid-tile colspan="8" rowspan="4">

            <owl-carousel-o [options]="XlSlider" class="full-space">
              <ng-template class="item" carouselSlide>
                <img class="image-fit" src="assets/img/slider/slide-1.jpg" alt="Test 1"/>
              </ng-template>
              <ng-template class="item" carouselSlide>
                <img class="image-fit" src="assets/img/slider/slide-2.jpg" alt="Test 2"/>
              </ng-template>
              <ng-template class="item" carouselSlide>
                <img class="image-fit" src="assets/img/slider/slide-3.jpg" alt="Test 3"/>
              </ng-template>
              <ng-template class="item" carouselSlide>
                <img class="image-fit" src="assets/img/slider/slide-4.jpg" alt="Test 4"/>
              </ng-template>
              <ng-template class="item" carouselSlide>
                <img class="image-fit" src="assets/img/slider/slide-5.jpg" alt="Test 5"/>
              </ng-template>
              <ng-template class="item" carouselSlide>
                <img class="image-fit" src="assets/img/slider/slide-6.jpg" alt="Test 6"/>
              </ng-template>
              <ng-template class="item" carouselSlide>
                <img class="image-fit" src="assets/img/slider/slide-7.jpg" alt="Test 7"/>
              </ng-template>
              <ng-template class="item" carouselSlide>
                <img class="image-fit" src="assets/img/slider/slide-8.jpg" alt="Test 8"/>
              </ng-template>
              <ng-template class="item" carouselSlide>
                <img class="image-fit" src="assets/img/slider/slide-9.jpg" alt="Test 9"/>
              </ng-template>
              <ng-template class="item" carouselSlide>
                <img class="image-fit" src="assets/img/slider/slide-10.jpg" alt="Test 10"/>
              </ng-template>
            </owl-carousel-o>
        </mat-grid-tile>
        <mat-grid-tile colspan="2" rowspan="2">
          <mat-card class="slider-card">

            <mat-card-content class="zero-o">
              <img class="image-fit" src="assets/img/slider/PD-BT900.jpg" alt="Test 4"/>
            </mat-card-content>
          </mat-card>
        </mat-grid-tile>
        <mat-grid-tile colspan="2" rowspan="2">
          <mat-card class="slider-card">

            <mat-card-content class="zero-o">
              <img class="image-fit" src="assets/img/slider/TWS-2S.jpg" alt="Test 4"/>
            </mat-card-content>
          </mat-card>
        </mat-grid-tile>

        <mat-grid-tile colspan="2" rowspan="2">
          <mat-card class="slider-card">
            <mat-card-content class="zero-o">
              <img class="image-fit" src="assets/img/slider/RB-S30.jpg" alt="Test 4"/>
            </mat-card-content>
          </mat-card>
        </mat-grid-tile>

        <mat-grid-tile colspan="2" rowspan="2">
          <mat-card class="slider-card">
            <mat-card-content class="zero-o">
              <img class="image-fit" src="assets/img/slider/RC-128a.jpg" alt="Test 4"/>
            </mat-card-content>
          </mat-card>
        </mat-grid-tile>
      </mat-grid-list>


<!-- END Grid -->

4

1 回答 1

1

为了解决这个问题，我在下面应用了几行代码。

public ngAfterViewInit(): void {window.dispatchEvent(new Event('resize'));}
于 2022-01-21T04:48:50.577 回答