Bootstrap 移动浏览器上的 4 个轮播
Bootstrap 4 carousel on mobile browser
我最近开发了一个网站,使用 Bootstrap 4(4.4.1) 和 Angular 7和 轮播。现在在桌面上一切正常,单击左/右箭头可以正确导航,但是当我在移动设备上加载网站时,滑动 旋转木马什么都不做.如果我使用箭头,一切都很好,但是当涉及到滑动时,没有任何反应 直到我使用 右 箭头。在初始滚动右按钮后,滑动就像一个魅力。所以我的问题是我应该怎么做才能让旋转木马在不先单击右箭头的情况下毫无问题地滑动。
这是轮播的 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");
});
});
如有任何帮助,我们将不胜感激。
解决我的问题的是以下问题:
- 在 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.
});
});
完成这些步骤后,滑动功能可在移动设备上按预期工作
我最近开发了一个网站,使用 Bootstrap 4(4.4.1) 和 Angular 7和 轮播。现在在桌面上一切正常,单击左/右箭头可以正确导航,但是当我在移动设备上加载网站时,滑动 旋转木马什么都不做.如果我使用箭头,一切都很好,但是当涉及到滑动时,没有任何反应 直到我使用 右 箭头。在初始滚动右按钮后,滑动就像一个魅力。所以我的问题是我应该怎么做才能让旋转木马在不先单击右箭头的情况下毫无问题地滑动。
这是轮播的 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");
});
});
如有任何帮助,我们将不胜感激。
解决我的问题的是以下问题:
- 在 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.
});
});
完成这些步骤后,滑动功能可在移动设备上按预期工作