亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

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

react swiper@6.x 問題處理

由于這個(gè)版本比較低，所以網(wǎng)上直接搜到的swiper的使用方法都不適用此版本，故對(duì)我工作中遇到的此版本問題做一總結(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
        // 你可以通過(guò)autoplay的其他選項(xiàng)來(lái)控制自動(dòng)播放的行為
        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配置自動(dòng)輪播，且開啟移入停止的配置

 		autoplay={{
          delay: 5000,
          disableOnInteraction: false,
          // 鼠標(biāo)移入停止自動(dòng)播放
          pauseOnMouseEnter: true,
        }}
``

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

相關(guān)文章

最新評(píng)論