在reactjs中的swiper中添加一个下一个按钮答案

【问题标题】：adding a next button in swiper in reactjs在reactjs中的swiper中添加一个下一个按钮
【发布时间】：2023-01-09 03:35:55
【问题描述】：

这是示例代码：

import "./introslider.css";
import { Swiper, SwiperSlide } from "swiper/react";
import React, { Component } from "react";

import Hand from "../../images/hand_1.png";
import Sabad from "../../images/group_2.png";
import Cart from "../../images/credit_card_35.png";
// Import Swiper styles
export default class IntroSlider extends Component {
  state = {
    slides: [
      {
        Logo: Hand,
        Hit: "lorem[enter image description here][1]",
        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"
          // // install Swiper modules
          // // modules={[Navigation, Pagination, Scrollbar, A11y]}
          spaceBetween={50}
          slidesPerView={1}
          // navigation
          // pagination
          // scrollbar={{ draggable: true }}

          // 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}>
                next
              </button>
            </SwiperSlide>
          ))}
        </Swiper>
      </div>
    );
  }
}

该页面有 3 张刷卡卡，除了下一个按钮外，一切正常。和单击蓝色的下一个按钮时，它应该移动到下一个滑块。但我不知道如何处理。感谢您的回答：）我们正在使用 swiperJs/react (https://swiperjs.com/react)。

【问题讨论】：

您找到问题的解决方案了吗？

标签： reactjs swiper.js

【解决方案1】：

解决方案是添加一个带有 className="next" 的 div 标签，最好在其中添加一些按钮或图标，就像这样 -

 <div className="next">
    <Button> Next</Button>
    </div>

【讨论】：