CODEWITHSUNDEEP
javascriptreactjsswiper.js
dan_boy
dan_boy

Reputation: 2009

How to manipulate slide array of swiper.js in React?

I am trying to add additional slides to my slider. I am using swiper.js and React to do this. I found that sandbox from the official documentation that is supposed to show how to add or remove slides from the slider array. However, the sandbox is broken and I can't get it to work. I tried the last hour to make work but with little success.

There for i am happy for any hint!

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>
  
    </>
  )
}

Upvotes: 0

Views: 2915

Answers (1)

Vitaliy Rayets
Vitaliy Rayets

Reputation: 2394

See Demo . You must use module Manipulation to manipulate slides check docs

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

Upvotes: 1

Related Questions