时间戳

首页 > 解决方案 > 移动浏览器上的 Bootstrap 4 轮播

jquery - 移动浏览器上的 Bootstrap 4 轮播

问题描述

我最近开发了一个使用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");
     });
});

任何有关此事的帮助将不胜感激。

标签： jqueryangularjquery-mobilebootstrap-4carousel

解决方案

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

  1. 在 angular.json 中，按此顺序精细集成 jQuery 和 Bootstrap 脚本。
  2. 在您定义轮播之后的组件中
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.
     });
});

在这些步骤之后，滑动在移动设备上按预期工作

推荐阅读