Question

我试图在bootstrap 4 carousel（ngb-carousel）中添加滑动配置。但它似乎尚未实施。那么有没有其他方法来实现bootstrap 4轮播中的滑动？

Answer 1

我遇到了同样的问题，我发现这个名为TouchSwipe的简单jQuery插件可以让你做到这一点。您只需下载插件并在脑中链接到它，然后将以下代码添加到您的html文件的底部：

<script>
$(document).ready(function() {  
    //Enable swiping...
    $(".carousel-inner").swipe( {
        //Generic swipe handler for all directions
        swipeLeft:function(event, direction, distance, duration, fingerCount) {
            $(this).parent().carousel('prev'); 
        },
        swipeRight: function() {
            $(this).parent().carousel('next'); 
        },
        //Default is 75px, set to 0 for demo so any distance triggers swipe
        threshold:0
    });
});
</script>

Answer 2

1-将ngb轮播导入到ts文件：

import { NgbCarousel } from '@ng-bootstrap/ng-bootstrap';

2-将ViewChild节添加到ts文件：

@ViewChild(NgbCarousel) carousel;

3-将swiper方法添加到ts文件：

  swipe(e) {
    if (e === 'swiperight') {
      this.carousel.prev();
    } else {
      this.carousel.next();
    } 
  }

4-将事件轮播主div添加到html文件：

<div class="swipe" id="carousel"(swipeleft)="swipe($event.type)"
  (swiperight)="swipe($event.type)">

Bootstrap 4轮播刷卡配置丢失

2 个答案: