移动浏览器上的 Bootstrap 4 轮播

Posted 2023-05-09

【中文标题】移动浏览器上的 Bootstrap 4 轮播

【英文标题】：Bootstrap 4 carousel on mobile browser

【发布时间】：2020-04-09 22:51:35

【问题描述】：

我最近开发了一个使用 Bootstrap 4(4.4.1) 和 Angular 7 和 carousel 的网站。现在在桌面上一切正常，单击左/右箭头可以正常导航，但是当我在移动设备上加载网站时，滑动轮播什么也没做。如果我使用箭头，一切都很好，但是在滑动时，什么都没有发生直到我使用右箭头。在通过右键初始滚动后，滑动就像一个魅力。所以我的问题是我应该怎么做才能让轮播在不先点击右箭头的情况下顺利滑动。

这是轮播的 html 代码

<div id="dataCR" class="carousel slide full-width"
    data-interval="false"
    data-wrap="false"
    data-touch="true"
    data-keyboard="false"
    data-pause="true"
    data-ride="carousel">
    <div class="carousel-inner full-height">
        <div class="carousel-item" [ngClass]="'active': i===0" *ngFor="let item of data; let i = index; let first = first;">
            <div class="row">
                <div class="col-6 col-sm-6 col-md-4 col-lg-3"
                    *ngFor="let obj of item; let j = index; let firstA = first;" >
                    <app-card
                          [card]="obj"
                          [isIndicator]="obj.isIndicator">
                    </app-card>
                </div>
            </div>
        </div>
    </div>
    <a class="carousel-control-prev leftRs"
        href="#dataCR"
        data-slide="prev"
        (click)="handleCarouselClick($event, 'prev')"
        *ngIf="data.length > 1 && this.currentPage > 0">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next rightRs"
        href="#dataCR"
        data-slide="next"
        (click)="handleCarouselClick($event, 'next')"
        *ngIf="data.length > 1 && this.currentPage < (data.length - 1)">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>

我也尝试过使用 JQuery，但没有成功。我试图捕捉幻灯片事件，甚至添加幻灯片事件，但实际上什么也没发生。

这是我使用的代码：

$('#dataCR').on('slid.bs.carousel', function () 
    console.log('here we are');
);

$(document).ready(function() 
     // THESE 2 ARE CRUSHING WITH .swiperight is not a function
     (<any>$('#dataCR')).swiperight(function() 
         console.log('here we are - PREV');
     );
     (<any>$('#dataCR')).swipeleft(function() 
         console.log('here we are - NEXT');
     );


     // THESE 2 ARE COMPILING BUT IT'S LIKE THEY ARE NEVER BEING CALLED
     $(document).on('swipeleft', '.carousel', function (e) 
              console.log("swipe left");
     );
     $(document).on('swiperight', '.carousel', function (e) 
              console.log("swipe right");
     );
);

非常感谢您对此事的任何帮助。

【参考方案1】：

解决我的问题的是以下问题：

在 angular.json 中按此顺序精细集成 jQuery 和 Bootstrap 脚本。 在您定义轮播的组件中

import  Component, OnInit, ChangeDetectorRef, HostListener, OnDestroy  from '@angular/core';

添加这一行

declare var $:any;

然后在ngOnInit中添加如下代码：

let self = this;
$(document).ready(function() 
     $('#dataCR').carousel(
         interval: false
     );
     $('#dataCR').on('slid.bs.carousel', function ($event) 
         // This event handles the completed slide animation.
         // here you can find the direction of the animation and 
         // from which to which slide it went.
         // Its useful if you want to track paging etc.
     );
);

在这些步骤之后，滑动可以在移动设备上正常工作