react swiper@6.x 工作中遇到的問題處理方案
更新時間：2025年01月15日 10:15:45 作者：人無遠(yuǎn)慮必有近憂！
本文總結(jié)了reactswiper@6.x版本的使用方法和配置,包括安裝步驟和配置自動輪播及移入停止的選項,感興趣的朋友跟隨小編一起看看吧
react swiper@6.x 問題處理
由于這個版本比較低，所以網(wǎng)上直接搜到的swiper的使用方法都不適用此版本，故對我工作中遇到的此版本問題做一總結(jié)，愿遇到同樣問題的朋友少走遠(yuǎn)路：
1、react swiper@6.x的使用方法：
（1）安裝：
npm install swiper@6.8.4
（2）使用
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper-bundle.css';
import SwiperCore, { Autoplay, Navigation, Pagination, A11y } from 'swiper';
SwiperCore.use([Autoplay, Navigation, Pagination, A11y]);
<Swiper
// 你可以通過autoplay的其他選項來控制自動播放的行為
autoplay={{
delay: 5000,
disableOnInteraction: false,
pauseOnMouseEnter: true,
}}
allowTouchMove={true}
loop={true}
// 自定義前進(jìn)后退按鈕的圖標(biāo)
navigation={{
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}}
// 在CSS中定義前進(jìn)后退按鈕的樣式和圖標(biāo)
className="my-swiper"
pagination={{ clickable: true }}
onSlideChange={() => console.log('slide change')}
onSwiper={(swiper) => console.log(swiper)}>
<SwiperSlide>
<div style={{ height: 200 }}>Slide 1</div>
</SwiperSlide>
<SwiperSlide>
<div style={{ height: 200 }}>Slide 2</div>
</SwiperSlide>
<SwiperSlide>
<div style={{ height: 200 }}>Slide 3</div>
</SwiperSlide>
<SwiperSlide>
<div style={{ height: 200 }}>Slide 4</div>
</SwiperSlide>
{/* 前進(jìn)按鈕 */}
<div className="swiper-button-next" />
{/* 后退按鈕 */}
<div className="swiper-button-prev" />
</Swiper>2、react swiper@6.x配置自動輪播，且開啟移入停止的配置
autoplay={{
delay: 5000,
disableOnInteraction: false,
// 鼠標(biāo)移入停止自動播放
pauseOnMouseEnter: true,
}}
``到此這篇關(guān)于react swiper@6.x 工作中遇到的問題處理方案的文章就介紹到這了,更多相關(guān)react swiper@6.x 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Ant Design中使用css切換的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家介紹了Reactjs?錯誤邊界優(yōu)雅處理方法demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
這篇文章主要介紹了手把手教您實現(xiàn)react異步加載高階組件,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
本篇文章主要介紹了webpack 2的react開發(fā)配置實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
本文主要介紹了React選擇MessageChannel作為事件調(diào)度機(jī)制的原因,essageChannel屬于宏任務(wù),延遲極低且不會阻塞渲染,能夠滿足React在不阻塞瀏覽器的前提下,盡可能多地推進(jìn)Fiber渲染進(jìn)度的需求2026-05-05
React?SSR架構(gòu)Streaming?Render與Selective?Hydration解析
這篇文章主要為大家介紹了React?SSR架構(gòu)Streaming?Render與Selective?Hydration解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要介紹了解決React初始化加載組件會渲染兩次的問題,文中有出現(xiàn)這種現(xiàn)象的原因及解決方法,感興趣的同學(xué)跟著小編一起來看看吧2023-08-08
本文主要介紹了react解決 Hooks 閉包陷阱的問題,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2026-05-05
這篇文章主要為大家介紹了React錯誤用法習(xí)慣分析詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
這篇文章主要為大家介紹了React useState的錯誤用法避坑詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01