swiper使用小记:

swiper使用小记:

import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from 'swiper';// 引入需要使用的工具

import { Swiper, SwiperSlide } from 'swiper/react';// 引入swiper 组件

import 'swiper/swiper-bundle.css';// 引入样式

import 'swiper/swiper.less';

import 'swiper/components/navigation/navigation.less';

import 'swiper/components/pagination/pagination.less';

import 'swiper/components/scrollbar/scrollbar.less';

// 实例化

SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]);

const Demo=()=>{

return <Swiper

spaceBetween={1}// 间隔的距离

slidesPerView={8} //展示几个

navigation //箭头

preventClicksPropagation={false} //阻止click冒泡。拖动Swiper时阻止click事件。

>

{category.map((item) => {

return (

<SwiperSlide

key={item.categoryName}

className={styles.swiper_slide_layout}>

<Link

key={item.categoryName}

className={styles.standar_anchor_link}

href={`#${item.categoryName}`}

title={item.categoryName}

/>

</SwiperSlide>

);

})}

</Swiper>

}