记录react中使用swiper插件遇到的问题

最新推荐文章于 2024-06-03 15:30:51 发布
最新推荐文章于 2024-06-03 15:30:51 发布
阅读量1.1k 收藏
点赞数
分类专栏： react 文章标签： react swiper
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41620704/article/details/87889210
版权

最近再学习react框架，想做想做一个轮播的组件，就先在网上扒拉了一下，开始照葫芦画瓢，先上图，说一下问题

 而且我已经重新设置的css样式

找了好久，最后发现问题，每个swiper-slide元素的宽度是750.4px，而每次轮播图滑动时transform在X轴方向移动的距离是734px，让我联想到了在vue中使用swiper插件使用了

就是在组件挂载完成时，会等css树也挂载完成才去更新swiper，由于在react中不知时如何使用的，于是在创建swiper时增加了个定时器，如下图

这样再来看效果就ok了，大功告成。

孑孑然
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react中使用swiper的具体方法
08-27
React中使用Swiper的具体方法 React中使用Swiper的具体方法是指在React项目中如何使用Swiper库来实现轮播图功能。Swiper是一个流行的轮播图库，能够帮助开发者快速实现轮播图功能。但是，在React项目中使用Swiper...
react-手把手教你在react中使用Swiper4做轮播图
08-15
使用npm或yarn来安装Swiper4及其CSS文件，这样可以引入到你的React项目中。 ``` npm install swiper@^4 --save 或 yarn add swiper@^4 ``` 同时，别忘了安装其样式文件： ``` npm install swiper@^4/dist/...
swiper轮播图自定义slide宽度太长显示不完全，太短显示空白问题
qq_45560350的博客
03-30 5440
写了那么多次轮播图，每次出错都不长记性，既然如此好记性不如烂笔头，把错误以及错误出现的原因和解决方法梳理记下来，加深一下记忆。 问题表现 从swiper官网上复制黏贴下来了一个free模式的轮播图 js代码如下 var swiper = new Swiper('.swiper-container', { slidesPerView: 3, spaceBetween: 30, freeMode: true, pagination: { el:
swiperjs自定义宽度
kilito_01的博客
07-26 2161
swiperjs自定义宽度
react 中使用 swiper
最新发布
芝芝为荔枝
06-03 995
最近项目中需要用到轮播图，我立马想起了swiper，那么本文就来带大家体验一下如何在React中使用这个插件，使用的是的形式。需求非常简单，就是一个可以自动播放、点击切换的轮播图（跑马灯），可以同时展示n张图片，无限滚动。注意：如果是遇到纯文字的轮播效果，那我建议完全可以不用这么重的东西，直接使用antd中的Tab组件或者干脆自己写也能达到效果。
React使用Swiper实现3D coverflow 效果
JulyNight的博客
01-28 1116
下面是.ts文件代码 import React, { useEffect } from 'react'; import classnames from 'classnames'; import { Row } from 'antd'; import styles from './index.less'; const Videoportal = () => { // 登录 useEffect(() => { const a = new Swiper('.swiper-contain
swiper8在react中用法
imber___zsk的博客
08-11 886
代码】swiper8在react中用法。
轮播图 怎么计算swiper图片的宽高度
晨晨晨的博博博客
11-22 832
先算出原图的宽高度等比例给swiper定宽高度 原图的宽高度:把图片保存到桌面上，查看图片 swiper 宽度 / swiper 高度 = 原图的宽度 / 原图的高度 swiper的宽度为100%/100vw/750rpx swiper 高度：swiper 宽度 * 原图高 / 原图宽 ...
react-native封装插件swiper的使用方法
08-27
下面将介绍如何在 React Native 中使用 Swiper 插件。 安装 Swiper 插件 首先，需要使用 npm 或 yarn 安装 Swiper 插件。使用以下命令安装： ``` npm i react-native-swiper --save ``` 创建 React Native 项目 ...
React Navigation 使用中遇到的问题小结
08-27
React Navigation 使用中遇到的问题小结 React Navigation 是一个流行的导航库，广泛应用于 React Native 开发中。然而，在使用 React Navigation 时，开发者经常会遇到一些问题，特别是在 Android 和 iOS 平台上。...
react中使用swiper不自动轮播以及分页器不显示等问题
m0_70542915的博客
11-08 1686
react中使用swiper不自动轮播以及分页器不显示等问题
swiper-8.0.7.zip
05-18
Swiper常用于移动端网站的内容触摸滑动 Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触屏轮播图切换等常用效果。
react中一个页面使用多个swiper插件相互干扰问题的解决
riguangzhixia的博客
03-04 2015
一个页面使用多个swiper的时候可能会相互影响，其实这个问题很显而易见，如果你实例化的都是同一个swiper。 因此，解决办法就是给swiper-container添个别的类名，实例化的时候用这个不同的类名。 如下： 第一个swiper，每3秒自动轮播。 componentDidMount() { this.swiper1= new Swiper('.swiper1',...
react中swiper的配置（纯swiper篇）
weixin_43486426的博客
07-10 3918
react中swiper的配置（纯swiper篇） 本次的swiper的配置基于3.4.2版本的swiper包 本篇博客可以有效解决配置的swiper不轮播，不自动轮播问题 1、首先安装swiper3.4.2版本 npm i swiper@3.4.2 -s 这时候你会发现你的node_modules里面多了一个swiper包，如果你已经安装过其他的swiper，请先卸载 2、如果你的swiper里面轮播的内容是静态的，也就是死数据的话，new swiper可以放在 组件componentDidMount周
记录React中使用swiper的一些问题
qq_25399005的博客
08-31 902
记录React中使用swiper的一些问题 最近在做一个可视化的项目，用的是react hooks的写法。遇到一个需求，需要轮播并指定轮播动画来展示一些大屏，于是引用了swiper。其中需求要求可以点击按钮来跳转到轮播的某一页，查api找到slideTo这个方法，但用了ref并不能拿到这个方法，最后在stackoverflow上找到了答案，通过onSwiperprops拿到了实例。 记录一下代码： import React,{useState} from "react" import {Swiper,Swi
6.这些天react中遇到的swiper坑！！！！
weixin_42191739的博客
11-09 1565
如何在react中使用swiper（个人用法，不喜勿喷） 安装 cnpm install swiper -S 使用 在所需组件中引入 import {Swiper,SwiperSlide} from 'swiper/react' import 'swiper/swiper.scss' 组件return出的代码 <div className={allclass.main}> <Swiper slidesPer
react 中 用swiper 存在swiper互相干扰的问题解决方法
qq_42436569的博客
08-10 2539
以下是app.jsx里的swiper   &lt;div className="swiper-container App-swiper"&gt; &lt;div className="swiper-wrapper"&gt; &lt;div className="swiper-slide"&gt; ..
如何控制swiper中单个swiper-slider的宽度
weixin_30402343的博客
08-23 3846
1.在项目里遇到了这个问题，首先我们明确一下单个swiper-slider 的宽度是如何确定的 在swiper 的参数配置里面有一个参数：slidesPerView var swiper = new Swiper('.swiper-container', { slidesPerView: "auto", pagination: { el: '...
swiper插件自定义每个slide的长度
qq_43654065的博客
08-12 1549
一般swiper可以通过父元素的宽度以及显示的个数来自动分配每个slide的长度，但是实际开发中，一般都需要自定义slide的长度，这个时候需要设置 var mySwiper = new Swiper('.swiper-container',{ slidesPerView : 'auto', // 开启自定义slide宽度，配合css样式设置即可 }) 然后再自己设置slide的长度，即可实现理想效果。 ...
react中使用swiper
05-31
要在React中使用Swiper，需要先安装Swiper库： ```bash npm install swiper --save ``` 然后，在React组件中导入Swiper库并初始化： ```jsx import React, { Component } from 'react'; import Swiper from 'swiper'; class MySwiper extends Component { componentDidMount() { new Swiper('.swiper-container', { // Swiper配置项 }); } render() { return ( <div className="swiper-container"> <div className="swiper-wrapper"> <div className="swiper-slide">Slide 1</div> <div className="swiper-slide">Slide 2</div> <div className="swiper-slide">Slide 3</div> </div> </div> ); } } export default MySwiper; ``` 在上面的代码中，我们先在组件的`componentDidMount`生命周期方法中初始化Swiper，并传入Swiper的配置项。然后，在`render`方法中，我们渲染了一个包含Swiper滑动项的HTML结构。 注意，我们给Swiper容器和滑动项分别添加了类名`swiper-container`和`swiper-wrapper`，这是Swiper库要求的。 以上就是在React中使用Swiper的基本步骤。当然，你可以根据自己的需求进行更加详细的配置。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值