Блог

Я пытаюсь добавить дополнительные слайды в свой слайдер. Я использую swiper.js и отреагируйте, чтобы сделать это. Я нашел эту песочницу из официальной документации, которая должна показывать, как добавлять или удалять слайды из массива слайдеров. Однако песочница сломана, и я не могу заставить ее работать. Я пытался последний час работать, но без особого успеха.

Там я буду рад любому намеку!

https://codesandbox.io/s/xtosg?file=/src/App.jsx

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

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

import "./styles.css";


// import Swiper core and required modules
import SwiperCore, {
  Pagination,Navigation
} from 'swiper';

// install Swiper modules
SwiperCore.use([Pagination,Navigation]);


export default function App() {
  
  
  
  const [swiperRef, setSwiperRef] = useState(null);

  let appendNumber = 4;
  let prependNumber = 1;

  const prepend2 = () => {
    swiperRef.prependSlide([
      '<div class="swiper-slide">Slide '   (--prependNumber)   '</div>',
      '<div class="swiper-slide">Slide '   (--prependNumber)   '</div>'
    ]);
  }

  const prepend = () => {
    swiperRef.prependSlide('<div class="swiper-slide">Slide '   (--prependNumber)   '</div>');
  }

  const append = () => {
    swiperRef.appendSlide('<div class="swiper-slide">Slide '   (  appendNumber)   '</div>');
  }

  const append2 = () => {
    swiperRef.appendSlide([
      '<div class="swiper-slide">Slide '   (  appendNumber)   '</div>',
      '<div class="swiper-slide">Slide '   (  appendNumber)   '</div>'
    ]);
  }
  
  return (
    <>
    
  <Swiper onSwiper={setSwiperRef} slidesPerView={3} centeredSlides={true} spaceBetween={30} pagination={{
  "type": "fraction"
}} navigation={true} className="mySwiper">
    <SwiperSlide>Slide 1</SwiperSlide>
    <SwiperSlide>Slide 2</SwiperSlide>
    <SwiperSlide>Slide 3</SwiperSlide>
    <SwiperSlide>Slide 4</SwiperSlide>
  </Swiper>

  <p className="append-buttons">
  

  
  
  <button onClick={() => prepend2()} className="prepend-2-slides">Prepend 2 Slides</button>
  <button onClick={() => prepend()} className="prepend-slide">Prepend Slide</button>
  <button onClick={() => append()} className="append-slide">Append Slide</button>
  <button onClick={() => append2()} className="append-2-slides">Append 2 Slides</button>
  </p>
  
    </>
  )
}
 

Смотрите Демонстрацию . Вы должны использовать модуль Manipulation для управления документами проверки слайдов

import SwiperCore, { Pagination, Navigation, Manipulation } from "swiper";
SwiperCore.use([Pagination, Navigation, Manipulation]);