反應如何通過 onClick 事件在 Swiper 滑塊中添加卡片元素？

Question

反應如何通過 onClick 事件在 Swiper 滑塊中添加卡片元素？

Answer 1

當他們單擊DEMO時，我已經創建了用於添加卡的代碼沙盒演示

下面是代碼，試一試。 在此演示中，幻燈片將添加到末尾，因此您需要滑動到末尾以檢查添加的新幻燈片。

import { useState } from "react";
// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";

// Import Swiper styles
import "swiper/css";

export default function App() {
  const [swipers, setSwipers] = useState([
    "Slide 1",
    "Slide 2",
    "Slide 3",
    "Slide 4"
  ]);

  const addSwiper = (swiper) => {
    setSwipers((prevSwipers) => prevSwipers.concat(swiper));
  };

  return (
    <>
      <Swiper
        spaceBetween={50}
        slidesPerView={3}
        onSlideChange={() => console.log("slide change")}
        onSwiper={(swiper) => console.log(swiper)}
      >
        {swipers.map((swiper, index) => (
          <SwiperSlide key={index}>{swiper}</SwiperSlide>
        ))}
      </Swiper>
      <br />
      <br />
      <br />
      <button onClick={() => addSwiper("Add Swiper Card 1")}>
        Add Swiper Card 1 (Click on this to Add)
      </button>{" "}
      <br />
      <button onClick={() => addSwiper("Add Swiper Card 2")}>
        Add Swiper Card 2 (Click on this to Add)
      </button>
    </>
  );
}