欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

react swiper@6.x 工作中遇到的問題處理方案

 更新時間：2025年01月15日 10:15:45   作者：人無遠慮必有近憂！  
本文總結(jié)了reactswiper@6.x版本的使用方法和配置,包括安裝步驟和配置自動輪播及移入停止的選項,感興趣的朋友跟隨小編一起看看吧

react swiper@6.x 問題處理

由于這個版本比較低，所以網(wǎng)上直接搜到的swiper的使用方法都不適用此版本，故對我工作中遇到的此版本問題做一總結(jié)，愿遇到同樣問題的朋友少走遠路：

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}
        // 自定義前進后退按鈕的圖標
        navigation={{
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        }}
        // 在CSS中定義前進后退按鈕的樣式和圖標
        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>
        {/* 前進按鈕 */}
        <div className="swiper-button-next" />
        {/* 后退按鈕 */}
        <div className="swiper-button-prev" />
      </Swiper>

2、react swiper@6.x配置自動輪播，且開啟移入停止的配置

 		autoplay={{
          delay: 5000,
          disableOnInteraction: false,
          // 鼠標移入停止自動播放
          pauseOnMouseEnter: true,
        }}
``

到此這篇關(guān)于react swiper@6.x 工作中遇到的問題處理方案的文章就介紹到這了,更多相關(guān)react swiper@6.x 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論