How to make Bootstrap carousel slider use mobile left/right swipe

前端 未结 10 1005
走了就别回头了
走了就别回头了 2020-11-29 15:49

DEMO JSSFIDDLE

  
相关标签:
10条回答
  • 2020-11-29 16:32

    If anyone is looking for the angular version of this answer then I would suggest creating a directive would be a great idea.

    NOTE: ngx-bootstrap is used.

    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;
      }
    }
    
    

    in html:

    <carousel appCarouselSwipe>
    
        ...
    
    </carousel>
    

    Reference

    0 讨论(0)
  • 2020-11-29 16:37

    With bootstrap 4.2 its now very easy, you just need to pass the touch option in the carousel div as data-touch="true", as it accepts Boolean value only.

    As in your case update bootstrap to 4.2 and paste(Or download source files) the following in exact order :

        <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>
    

    and then add the touch option in your bootstrap carousel div

        <div id="sidebar-carousel-1" class="carousel slide" data-ride="carousel" data-touch="true">
    
    0 讨论(0)
  • 2020-11-29 16:38

    See this solution: Bootstrap TouchCarousel. A drop-in perfection for Twitter Bootstrap's Carousel (v3) to enable gestures on touch devices. http://ixisio.github.io/bootstrap-touch-carousel/

    0 讨论(0)
  • 2020-11-29 16:38

    If you don't want to use jQuery mobile as like me. You can use Hammer.js

    It's mostly like jQuery Mobile without unnecessary code.

    $(document).ready(function() {
      Hammer(myCarousel).on("swipeleft", function(){
        $(this).carousel('next');
      });
      Hammer(myCarousel).on("swiperight", function(){
        $(this).carousel('prev');
      });
    });
    
    0 讨论(0)
提交回复
热议问题