hooks中使用swiper6.8.4版本（分页、轮播、切换默认页）

你好小马哥

已于 2022-05-05 10:23:16 修改

阅读量1.8k

点赞数 2

分类专栏： web 文章标签： react.js

于 2022-03-22 10:50:56 首次发布

本文链接：https://blog.csdn.net/qq_34955596/article/details/123654908

版权

web 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

上代码

1、页面引入swiper

	import { Swiper, SwiperSlide } from 'swiper/react';
	import SwiperCore, { Autoplay, Navigation, Pagination } from 'swiper/core';
	import 'swiper/swiper.min.css';
	import 'swiper/swiper.scss';
	import 'swiper/components/pagination/pagination.scss'
	SwiperCore.use([Autoplay, Pagination, Navigation])

2、代码使用（轮播滑块1个时，则不展示小圆点）

	<Swiper 
                                slidesPerView={1}
                                autoplay={{delay: 3000,disableOnInteraction: false}} 
                      
                                spaceBetween={10}
                                navigation
                                pagination={{ clickable: true }}
                                height={300}>
                                    {
                                        // @ts-ignore
                                        store.vesselPhoto.map((item: string, index: any) => (
                                            <SwiperSlide>
                                                <img  alt='' key={item} src={item}></img>
                                     
                                            </SwiperSlide>
                                        ))
                                    }
                                </Swiper>

如需修改默认显示某页

1、需获取swiper实例

const  [swiperDom ,setSwiperDom ] = useState(null)
<Swiper
                // slidesPerView={1}
                initialSlide={numberList[checkedIndex]}  // 默认页只能是number数字，不可使用Number
                centeredSlides={true}
                spaceBetween={10}
                navigation
                onSwiper={(swiper) => {
                    swiperDom = swiper; // 获取swiper实例    重点
                }}
                onSlideChange={(e) =>{
                    checkedIndex = e.activeIndex
                    setTimeout(() => {
                        if (swiperDom) {
                            swiperDom.slideTo(e.activeIndex,500,false);  // 使用swiper'中slideTo方法进行切换默认页
                        } 
                    }, 300);
                }}
                pagination={{ clickable: true }}
                className='swiperBox'
                >
               
            </Swiper>