javascript - 如何在 React 中操作 swiper.js 的幻灯片数组?
问题描述
我正在尝试向我的滑块添加其他幻灯片。我正在使用swiper.js和 React 来做到这一点。我发现官方文档中的沙盒应该显示如何从滑块数组中添加或删除幻灯片。但是,沙盒坏了,我无法让它工作。我在最后一个小时尝试工作,但收效甚微。
那里有任何提示我很高兴!
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>
</>
)
}
解决方案
See Demo .
You must use module Manipulation
to manipulate slides check docs
import SwiperCore, { Pagination, Navigation, Manipulation } from "swiper";
SwiperCore.use([Pagination, Navigation, Manipulation]);
推荐阅读
- reactjs - 如何使用 React Redux 实现 Firebase 身份验证?
- cakephp - 我可以在 CakePHP 中为特定表格列设置默认数字格式吗?
- html - SVG 整形 - 弯曲边缘
- web-crawler - 如何从 StormCrawler 提取的文本中排除脚本和样式标签?
- jquery - 将 div 位置滚动到内部元素
- javascript - 使用预签名 URL 和 SSE-C - 307 和 403 从浏览器上传 S3
- r - r 列表强制回收项目
- java - 在 Java 中使用 DecodedJWT 和 HMAC256 算法解码令牌 - NoClassDefFoundError
- c++ - C++ 如何在向量中找到最常见的元素
- c# - 使用 Post 提交时,ViewModel 中的模型具有 null 属性值