Question

我正在使用Angular 7。我按照以下说明添加了ngx-slick-carousel：https://www.npmjs.com/package/ngx-slick-carousel。

我按照自己的方式调整了slideConfig：

slideConfig = {
    slidesToShow: 3,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 1000,
    speed: 1400,
    infinite: true,
    lazyLoad: "ondemand",
    responsive: [
      {
        breakpoint: 991,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2,
          autoplaySpeed: 2000,
          speed: 100
        }
      }, 
      {
        breakpoint: 575,
        settings: unslick
      }
    ]
  };

我想在小于575像素的视口上unslick，所以我在slideConfig中添加了它。此处说明了配置参数：https://kenwheeler.github.io/slick/

现在，如果视口恢复到大于575像素，我想重新激活浮雕。

在线提供的解决方案都无法使用。

例如，在这里，当我创建ViewChild时，控制台打印未定义。 Reference slick instance from component (ngx-slick-carousel)

我还提到了使用jQuery再次启用平滑功能的解决方案，但是jQuery函数在Angular中没有标识。 https://github.com/kenwheeler/slick/issues/1730

Answer 1

html中的圆滑轮播元素具有属性#slickModal="slick-carousel"。

在组件中，我们导入SlickCarouselComponent

import { SlickCarouselComponent } from "ngx-slick-carousel";

并在变量中引用光滑的轮播

@ViewChild("slickModal") slickModal: SlickCarouselComponent;

现在我们导入HostListener

import { HostListener } from "@angular/core";

，并在以下函数中，我们检测视口的宽度。如果视口大于unslick断点，我们将重新初始化滑动。

@HostListener("window:resize", ["$event"])
getScreenSize(event?) {
  if (this.slickModal !== undefined) {
     if (window.innerWidth > 575) {
       if (!this.slickModal.initialized) {
         this.slickModal.initSlick();
       }
     } else if (this.slickModal.initialized) {
       this.slickModal.unslick();
     }
  }
}

确保在组件的构造函数中调用此函数

constructor() {
    this.getScreenSize();
}

ngx-slick-carousel在Angular中取消滑动后重新初始化滑动

1 个答案: