如何使 Bootstrap 旋转木马滑块使用移动左/右滑动

小开

最佳答案

更新:

我想出这个解决方案时，我是相当新的网页设计。现在我长大了，也更聪明了，利亚姆给出的答案似乎是一个更好的选择。请参阅下一个顶部答案; 这是一个更有效的解决方案。

我最近参与了一个项目，这个例子非常好用。我给你下面的链接。

首先你必须添加 jQuery mobile:

Http://jquerymobile.com/

这增加了触摸功能，然后你只需要做一些事情，比如滑动:

<script>
$(document).ready(function() {
$("#myCarousel").swiperight(function() {
$(this).carousel('prev');
});
$("#myCarousel").swipeleft(function() {
$(this).carousel('next');
});
});
</script>

下面的链接，你可以找到我使用的教程:

Http://lazcreative.com/blog/how-to/how-to-adding-swipe-support-to-bootstraps-carousel/

小开

看看这个解决方案: Bootstrap TouchCarousel 是一款完美的 Bootstrap 旋转木马(v3) ，可以在触摸设备上进行手势操作。 Http://ixisio.github.io/bootstrap-touch-carousel/

小开

我需要将这个功能添加到我最近正在开发的一个项目中，为了解决这个问题而添加 jQuery Mobile 似乎有些过火，所以我想出了一个解决方案，并将其放在 github: 引导旋转木马滑动上。

它是一个轻量级的 jQuery 插件(比 jQuery Mobile 触摸事件缩小了约600字节，大小为8kb) ，并且已经在 Android 和 iOS 上进行了测试。

这就是你如何使用它:

$('.carousel').bcSwipe({ threshold: 50 });

小开

选中的解决方案不准确，有时鼠标右键单击触发右击。在尝试了不同的刷卡插件后，我发现了一个几乎完美的插件。

触摸滑动

我说“几乎”是因为这个插件不支持将来的元素。所以当滑动内容被 ajax 或其他东西改变时，我们必须重新初始化滑动调用。这个插件有很多选项可以玩触摸事件，如多指触摸，捏等。

HLabs.rampinteractive.co.uk/touchswipe/demos/index.html :

解决方案一:

$("#myCarousel").swipe( {
swipe:function(event, direction, distance, duration, fingerCount, fingerData) {


if(direction=='left'){
$(this).carousel('next');
}else if(direction=='right'){
$(this).carousel('prev');
}


}
});

解决方案2: (对于将来的元素情况)

function addSwipeTo(selector){
$(selector).swipe("destroy");
$(selector).swipe( {
swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
if(direction=='left'){
$(this).carousel('next');
}else if(direction=='right'){
$(this).carousel('prev');
}
}
});
}
addSwipeTo("#myCarousel");

小开

如果你不想像我一样使用 jQuery mobile，你可以使用 < strong > Hammer.js

它基本上就像没有不必要代码的 jQuery Mobile。

$(document).ready(function() {
Hammer(myCarousel).on("swipeleft", function(){
$(this).carousel('next');
});
Hammer(myCarousel).on("swiperight", function(){
$(this).carousel('prev');
});
});

小开

我有点迟到了，但下面是我一直在使用的 jQuery:

$('.carousel').on('touchstart', function(event){
const xClick = event.originalEvent.touches[0].pageX;
$(this).one('touchmove', function(event){
const xMove = event.originalEvent.touches[0].pageX;
const sensitivityInPx = 5;


if( Math.floor(xClick - xMove) > sensitivityInPx ){
$(this).carousel('next');
}
else if( Math.floor(xClick - xMove) < -sensitivityInPx ){
$(this).carousel('prev');
}
});
$(this).on('touchend', function(){
$(this).off('touchmove');
});
});

不需要 jQuery 手机或任何其他插件。如果需要调整刷卡的灵敏度，请调整 5和 -5。希望这对谁有帮助。

小开

我建议直接跳转到 github 上的源代码，并将文件 carousel-swipe.js复制到您的项目目录中。

按以下方式使用刷卡事件:

$('#carousel-example-generic').carousel({
interval: false
});

小开

对于任何发现这一点，滑动在旋转木马似乎是原生的约5天前(2018年10月20日)按
Https://github.com/twbs/bootstrap/pull/25776

Https://deploy-preview-25776——twbs-bootstrap4.netlify.com/docs/4.1/components/carousel/

小开

在 bootstrap 4.2中，现在非常简单，只需要将 carousel div 中的 touch 选项作为 data-touch="true"传递，因为它只接受布尔值。

在你的例子中，将 bootstrap 更新到4.2，然后按照下面的顺序粘贴(或者下载源文件) :

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

然后添加触摸选项在您的引导旋转木马 div

    <div id="sidebar-carousel-1" class="carousel slide" data-ride="carousel" data-touch="true">

小开

如果有人正在寻找这个答案的有棱角的版本，那么我建议创建一个指令将是一个伟大的想法。

注意: 使用 Ngx-bootstrap。

import { Directive, Host, Self, Optional, Input, Renderer2, OnInit, ElementRef } from '@angular/core';
import { CarouselComponent } from 'ngx-bootstrap/carousel';


@Directive({
selector: '[appCarouselSwipe]'
})
export class AppCarouselSwipeDirective implements OnInit {
@Input() swipeThreshold = 50;
private start: number;
private stillMoving: boolean;
private moveListener: Function;


constructor(
@Host() @Self() @Optional() private carousel: CarouselComponent,
private renderer: Renderer2,
private element: ElementRef
) {
}


ngOnInit(): void {
if ('ontouchstart' in document.documentElement) {
this.renderer.listen(this.element.nativeElement, 'touchstart', this.onTouchStart.bind(this));
this.renderer.listen(this.element.nativeElement, 'touchend', this.onTouchEnd.bind(this));
}
}


private onTouchStart(e: TouchEvent): void {
if (e.touches.length === 1) {
this.start = e.touches[0].pageX;
this.stillMoving = true;
this.moveListener = this.renderer.listen(this.element.nativeElement, 'touchmove', this.onTouchMove.bind(this));
}
}


private onTouchMove(e: TouchEvent): void {
if (this.stillMoving) {
const x = e.touches[0].pageX;
const difference = this.start - x;
if (Math.abs(difference) >= this.swipeThreshold) {
this.cancelTouch();
if (difference > 0) {
if (this.carousel.activeSlide < this.carousel.slides.length - 1) {
this.carousel.activeSlide = this.carousel.activeSlide + 1;
}
} else {
if (this.carousel.activeSlide > 0) {
this.carousel.activeSlide = this.carousel.activeSlide - 1;
}
}
}
}
}


private onTouchEnd(e: TouchEvent): void {
this.cancelTouch();
}


private cancelTouch() {
if (this.moveListener) {
this.moveListener();
this.moveListener = undefined;
}
this.start = null;
this.stillMoving = false;
}
}

Html:

<carousel appCarouselSwipe>


...


</carousel>

参考文献