2

This similar question has dozens of answers for JQuery version but here I am using a react-bootstrap carousel component and I would like to add mobile gesture capability to it. How do I do it?

In JQuery, the straightforward answer will be to use Hammer.js to add event handler targeting the carousel and after that, use something along $(target_your_carousel).carousel('next/prev') to slide next/prev.

In React, however, we have ref to target the carousel but how do we even activate the next/prev?

One more way may be through a popular react library (as of May 2019) called react-swipeable. But after hooking it to the carousel, the same problem arises, how do we activate the next/prev?

Update: I realize that the "touch" data-attribute is introduced to upstream vanilla Bootstrap 4.2 as mentioned in react-bootstrap's Github issue. Maybe we can use latest version of Bootstrap with react-bootstrap?

Sayyora
  • 463
  • 5
  • 17

1 Answers1

3

In the end, I used this workaround.

Using react-swipeable, we can wrap the Carousel with Swipeable. Using ref to target the child Carousel and activate the child's methods.

import React, { Component } from 'react'; 
import { Swipeable } from 'react-swipeable';

class FooClass extends Components {
    constructor() { ...
        this.carouselRef = React.createRef(); }

    render() {
    onSwipedLeft: () => { this.carouselRef.current.next(); }

    return {
        <Carousel ref={this.carouselRef}> ...

This answer may be outdated soon because since "touch" data-attribute is introduced into upstream Bootstrap 4.2, the downstream react-bootstrap should support it in the future. In the future, just add "touch" attribute to the Carousel component.

<Carousel touch={true}>
Sayyora
  • 463
  • 5
  • 17