Comment utiliser le composant carrousel de Bootstrap 4 avec React.js?

Question

Voici le code suivant que j'essayais d'obtenir pour travailler avec le carrousel => C'est essentiellement l'exemple donné sur le site.

Aucune erreur, Le curseur actif est affiché mais l'effet de glissement ne semble pas fonctionner, je ne sais pas comment le faire fonctionner avec React. Est-ce que je le fais mal? Est-ce lié à 'href'? Aidez-moi, s'il vous plaît. Il me rend fou ...

import React from 'react'; 
 

 
export default class Slider extends React.Component { 
 
    render() { 
 
     return (
 
      <div id="carouselExampleIndicators" className="carousel slide" data-ride="carousel"> 
 
       <ol className="carousel-indicators"> 
 
        <li data-target="#carouselExampleIndicators" data-slide-to="0" className="active"></li> 
 
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> 
 
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> 
 
       </ol> 
 
       <div className="carousel-inner" role="listbox"> 
 
        <div className="carousel-item active"> 
 
         <img className="d-block img-fluid" src="resources/img/cd-background-img.jpg" alt="First slide"/> 
 
        </div> 
 
        <div className="carousel-item"> 
 
         <img className="d-block img-fluid" src="resources/img/home-bg.jpg" alt="Second slide"/> 
 
        </div> 
 
        <div className="carousel-item"> 
 
         <img className="d-block img-fluid" src="resources/img/home-bg.jpg" alt="Third slide"/> 
 
        </div> 
 
       </div> 
 
       <a className="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> 
 
        <span className="carousel-control-prev-icon" aria-hidden="true"></span> 
 
        <span className="sr-only">Previous</span> 
 
       </a> 
 
       <a className="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> 
 
        <span className="carousel-control-next-icon" aria-hidden="true"></span> 
 
        <span className="sr-only">Next</span> 
 
       </a> 
 
      </div> 
 
     ); 
 
    } 
 
}

Answer 1

Essayez https://github.com/leandrowd/react-responsive-carousel. Je l'utilise et fonctionne très bien!