Agregando un botón “siguiente” en Swiper en ReactJS.

Aquí está el código de muestra:

“` import { Navigation, Pagination, Scrollbar, A11y } from “swiper”;
import "./introslider.css";
import { Swiper, SwiperSlide } from "swiper/react";
import React, { Component } from "react";

<p>import Hand from "../../images/hand<em>1.png";
import Sabad from "../../images/group</em>2.png";
import Cart from "../../images/credit<em>card</em>35.png";
// Importar estilos de Swiper
export default class IntroSlider extends Component {
state = {
slides: [
{
Logo: Hand,
Hit: "lorem<a href="https://i.stack.imgur.com/DjlbR.png">enter image description here</a>",
Text: "lorem",
},
{
Logo: Sabad,
Hit: "lorem",
Text: "lorem",
},
{
Logo: Cart,
Hit: "lorem",
Text: "lorem",
},
],
};
handleclick = () => {
const swiper = new Swiper(".sliderStyle", {
// …
});
swiper.on("slideChange", function () {
console.log("slide changed");
});
};
render() {
return (
<div>
<Swiper
cssMode={true}
navigation={true}
pagination={true}
className="sliderStyle"
dir="ltr"
// // Instalar los módulos de Swiper
// // modules={[Navigation, Pagination, Scrollbar, A11y]}
spaceBetween={50}
slidesPerView={1}
// navigation
// pagination
// scrollbar={{ draggable: true }}</p>

<pre><code> // onSlideChange={() => console.log("slide change")}
>
{this.state.slides.map((slide, index) => (
<SwiperSlide key={index}>
<div className="row">
<img style={{ width: "120px" }} src={slide.Logo} alt="" />
</div>
<div className="row">{slide.Hit}</div>
<div className="row">{slide.Text}</div>
<button className="btn btn-primary" onClick={this.handleclick}>
siguiente
</button>
</SwiperSlide>
))}
</Swiper>
</div>
);
</code></pre>

<p>}
}
“`
la página tiene 3 tarjetas de Swiper y todo funciona excepto el botón siguiente.
cuando se hace clic en el botón azul siguiente, debería moverse al siguiente deslizador. Pero no sé cómo manejarlo. gracias por su respuesta 🙂
y estamos usando swiperJs/react (https://swiperjs.com/react).