在react+typescript中使用swiper

最新推荐文章于 2023-12-17 17:02:42 发布

疯狂橙子

最新推荐文章于 2023-12-17 17:02:42 发布

阅读量2.4k

点赞数 1

CC 4.0 BY-SA版权

文章标签： typescript reactjs

本文链接：https://blog.csdn.net/weixin_44207333/article/details/103860630

本文详细介绍了如何在React项目中利用Swiper库创建垂直滑动的轮播组件，包括安装Swiper、引入JS和CSS样式、编写HTML结构、设置CSS样式以及在JS中初始化Swiper实例的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基于react脚手架使用swiper

官方地址：swiper官方API文档
安装：npm i swiper -S
引入js和css样式：（地址不对就自行去node_modules里找swiper文件夹，修改到相应的css路径）

import Swiper from 'swiper';
import 'swiper/css/swiper.min.css'

html:

<div className="baogao">
                <div className="swiper-container">
                    <ul className="swiper-wrapper">
                        <li className="swiper-slide">slider1</li>
                        <li className="swiper-slide">slider2</li>
                        <li className="swiper-slide">slider3</li>
                    </ul>
                    <img ref={this.btn} className="next" src="https://avatar.csdnimg.cn/7/1/5/3_weixin_44207333.jpg" alt="111" />
                </div>
            </div>

css:

.baogao {
    background-color: black;
    position        : relative;
}

.swiper-container {
    height: 100vh;
}

.swiper-slide {
    width      : 100vw !important;
    height     : 100vh !important;
    color      : wheat;
    font-size  : .5rem;
    text-align : center;
    line-height: 100vh;
}

.swiper-wrapper li:nth-of-type(1) {
    background-color: #4390EE;
}

.swiper-wrapper li:nth-of-type(2) {
    background-color: #CA4040
}

.swiper-wrapper li:nth-of-type(3) {
    background-color: #FF8604;
}

.next {
    position : absolute;
    bottom   : 0;
    left     : 50%;
    transform: translate(-50%, -50%);
    z-index  : inherit;
    width    : .6rem;
    animation: myFirst 1s infinite;
}

@keyframes myFirst {
    0% {
        bottom: 0;
    }

    50% {
        bottom: .3rem;
    }

    100% {
        bottom: 0;
    }
}

js:

componentDidMount() {
        this.init()
    }
    init() {
        let mySwiper = new Swiper('.swiper-container', {
            direction: 'vertical',
        });
        this.btn.current.addEventListener("touchstart", () => {
            mySwiper.slideNext();
        })
    }