React Swiper 轮播使用

1.安装

npm i swiper --save

2.引入

import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper-bundle.css';

3.展示

<Swiper className='module1-swiper'
slidesPerView={1} 
spaceBetween={20}    
direction={global.isPC? 'horizontal':'vertical'}                                 >
                                    <div className="swiper-wrapper">
                                        {
                                            state.lists.map((item, key) => {
                                                return (
                                                    <SwiperSlide key={key} className="swiper-slide">
                                                        <img src={item.src}></img>
                                                        <div className="title">{item.title}</div>
                                                        <div className="content">
                                                            {item.content}
                                                        </div>
                                                    </SwiperSlide>
                                                );
                                            })
                                        }
                                    </div>

                                </Swiper>