首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >ngx-swiper-wrapper滑块立即占据屏幕焦点

ngx-swiper-wrapper滑块立即占据屏幕焦点
EN

Stack Overflow用户
提问于 2020-03-25 22:09:00
回答 1查看 814关注 0票数 0

我在第一页的angular应用程序中使用了ngx-swiper-wrapper。我正面临着页面加载的buggy场景,用户试图向下滚动,但他/她将最终更改幻灯片。显然,slider/swiper/carousel立即获得了鼠标的焦点,这不是一个理想的行为。

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

代码语言:javascript
复制
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);
                                   });
              }

}

如何更改配置以避免它?

EN

回答 1

Stack Overflow用户

发布于 2020-07-28 15:59:33

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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/60850550

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档