ngx-swiper-wrapper 滑块立即成为屏幕焦点答案

【问题标题】：ngx-swiper-wrapper slider takes the focus of screen right awayngx-swiper-wrapper 滑块立即成为屏幕焦点
【发布时间】：2020-03-25 14:09:00
【问题描述】：

我在第一页的 Angular 应用程序中使用 ngx-swiper-wrapper。我在页面加载时遇到了错误的情况，用户试图向下滚动，但是她/他最终会改变幻灯片。显然，slider/swiper/carousel 会立即获得鼠标的焦点，这不是一个理想的行为。

以下是我在 home 组件中选择的代码

import {
        SwiperComponent,
        SwiperConfigInterface,
        SwiperDirective,
} from 'ngx-swiper-wrapper';

export class HomeComponent implements OnInit {
   slideIndex: number = 0;
   public config: SwiperConfigInterface = {
          a11y: true,
          direction: 'horizontal',
          slidesPerView: 1,
          keyboard: true,
          mousewheel: true,
          scrollbar: false,
          navigation: true,
          pagination: false
   };

   @ViewChild(SwiperComponent, { static: false }) componentRef?: SwiperComponent;
   @ViewChild(SwiperDirective, { static: false }) directiveRef?: SwiperDirective;

   constructor(private zone: NgZone) { }

  ngOnInit() {
      this.runTimer();
  }

    runTimer() {
                this.zone.runOutsideAngular(() => {
                        setInterval(() => {
                                          if (this.slideIndex <= 2) {
                                                         this.slideIndex++;
                                                         this.directiveRef.setIndex(this.slideIndex);
                                          } else {
                                               this.slideIndex = 0;
                                               this.directiveRef.setIndex(this.slideIndex);
                                          }
                                       }, 5000);
                                   });
              }

}

如何更改配置以避免它？

【问题讨论】：

标签： javascript angular slider carousel swiper

【解决方案1】：

将鼠标滚轮设置为 false 并在悬停时将其更改为 true

【讨论】：