Currently, I am in the process of learning how to build a website using React and Bootstrap CSS. In my project, I have incorporated a carousel and a separated navigation bar. Below is an example of the code for my carousel:
class Home extends React.Component {
mousehover() {
... ???? .....
};
render() { return (
<div className="row">
<div id="carouselExampleIndicators" className="carousel slide col-9" data-ride="carousel">
<div className="carousel-inner" role="listbox">
<div className="carousel-item active">
<img className="d-block img-fluid" src="http://northdelawhere.happeningmag.com/wp-content/uploads/banner_sample300x300.jpg"
alt="First slide" />
</div>
<div className="carousel-item">
<img className="d-block img-fluid" src="http://www.raymiller.cc/thumbnail/exterior-beadboard-paneling-4-texture-plus-indoor-outdoor-siding-panel-beadboard-oak-sample-300-x-300.jpg"
alt="Second slide" />
</div>
<div className="carousel-item">
<img className="d-block img-fluid" src="..." 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>
<div className="col-3">
<ul className="flex-column">
<li data-target="#carouselExampleIndicators" data-slide-to="0" onmouseover={this.mousehover}>one</li>
<li data-target="#carouselExampleIndicators" data-slide-to="1">two</li>
<li data-target="#carouselExampleIndicators" data-slide-to="2">three</li>
</ul>
</div>
</div>
)}
}
React.render(<Home />, document.getElementById('root'));
I am currently struggling with creating an event for my list using onMouseHover. Unfortunately, my attempts have been unsuccessful. Can anyone provide me with a clue or example of how to create an onMouseHover event that will slide to the target carousel (data-slide-to)?
Thank you very much.