CODEWITHSUNDEEP
angularcarouselbootstrap-4
Gaurav Sharma
Gaurav Sharma

Reputation: 421

Bootstrap 4 carousel swipe config missing

I'm trying to add swipe config in bootstrap 4 carousel (ngb-carousel). But it seems it's not implemented yet. So is there any alternate way to achieve the swipe in bootstrap 4 carousel?

Upvotes: 2

Views: 3085

Answers (2)

emrebaris
emrebaris

Reputation: 86

1-import ngb carousel to your ts file:

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

2-Add ViewChild Section to ts file:

@ViewChild(NgbCarousel) carousel;

3-Add swiper method to ts file:

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

4- Add events carousel main div to html file:

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

Upvotes: 0

Joanna D. J.
Joanna D. J.

Reputation: 11

I had the same problem and I found this simple jQuery plugin called TouchSwipe which allows you to do just that. You simply download the plugin and link to it in your head, then add the following code to the bottom of your html file:

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

Upvotes: 1

Related Questions