在react中使用swiper/react

参考链接：https://swiper6.vercel.app/react#usage

其实swiper中文文档很多api都是直接阔以用的，只是形式不一样

中文文档：https://www.swiper.com.cn/api/

安装：yarn add swiper@6

import { Swiper, SwiperSlide } from 'swiper/react'
import { sliderList } from './source'
import SwiperCore, { Pagination, Autoplay, Navigation } from 'swiper'
import styled from '@emotion/styled'// Import Swiper styles
import 'swiper/swiper-bundle.css'
import { useEffect, useState } from 'react'export const MaskingLeft = styled.div`left: ${(props) => `${-props.offset}px`};
`export const MaskingRight = styled.div`right: ${(props) => `${-props.offset}px`};
`// 另外加载其他附加模块，比如 Navigation、Pagination 等模块
SwiperCore.use([Pagination, Autoplay, Navigation])const ITEM_WIDTH = 1200
const MARGIN_RIGHT = 48export const SwiperHome = () => {const [offset, setOffset] = useState(ITEM_WIDTH)const pagination = {"clickable": true,"renderBullet": function (index, className) {return '<span class=\"' + className + '\"><span class="user-defined"></span></span>';}}// 自定义前进后退按钮navigation   需要加.const navigation = { prevEl: '.masking-left', nextEl: '.masking-right' }return (<div className='swiper__content'><MaskingLeft className='masking-left' offset={offset} /><MaskingRight className='masking-right' offset={offset} /><SwiperallowTouchMove={false}autoplay={{delay: 8000,disableOnInteraction: false,}}centeredSlides={true}initialSlide={1}loop={true}navigation={navigation}pagination={pagination}slideToClickedSlide={true}slidesPerView="auto"spaceBetween={48}speed={700}onSwiper={(swiper) => {console.log(swiper, "onSwiper")}}>{sliderList.map((item, index) => {return (<SwiperSlide key={index}><div className="slider-item-left"><img alt="" className="item-left_icon" src={item.icon} /><div className="item-left_title">{item.title}</div><div className="item-left_title">{item.titleTwo}</div><div className="item-left_text">{item.text}</div></div><div className="slider-item-right"><img alt="" className="item-left_icon" src={item.img} /></div></SwiperSlide>)})}</Swiper></div>)
}

在react中使用swiper/react相关推荐

react 中使用Swiper轮播图插件
第一步.安装 npm i swiper 第二步.使用 import { Swiper, SwiperSlide } from 'swiper/react'; //根据自己的需要引用样式 import ...
react 中使用swiper
本文是官网翻译:Swiper React Components 配置项含义可参考 Swiper中文网-轮播图幻灯片js插件,H5页面前端开发安装 Swiper React 只能够通过 ...
react中函数式组件React Hooks
React Hooks 函数式组件使用hooks理由高阶组件为了复用,导致代码层级复杂生命周期的复杂写成functional组件,无状态组件,因为需要状态,又改成了class,成本高在16. ...
react中html转换,React中的HTML转义写法
在JSX中输出固定内容直接使用UTF-8字符 {代码...} 使用HTML转义字符 {代码...} 或者十进制的转义字符 {代码...} 动态内容的转义但是如果在外面加一层大括号的话,react为 ...
React中添加class——借助第三方库classnames
一.vue中添加class vue中添加class是一件非常简单的事情: 你可以通过传入一个对象: 你也可以传入一个数组: 甚至是对象和数组混合使用: 二.React中添加class React在JS ...
React中diff算法的理解
React中diff算法的理解 diff算法用来计算出Virtual DOM中改变的部分,然后针对该部分进行DOM操作,而不用重新渲染整个页面,渲染整个DOM结构的过程中开销是很大的,需要浏览器对DO ...
React 中constructor 作用
React 中constructor 作用 react中的constructor大体有两个作用 1.初始化this.state 2.纠正方法的this的指向 constructor(props) {s ...
React学习(十)-React中编写样式CSS(styled-components)
虽互不曾谋面,但希望能和你成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊撰文 | 川川 VX-ID:suibichuanji 点 ...
React学习(九)-React中发送Ajax请求以及Mock数据
虽互不曾谋面,但希望能和你成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊撰文 | 川川 VX-ID:suibichuanji 点 ...
React中的定时器-js
React中的定时器 react中每次状态改变都会导致页面更新,因此定时器得有特殊的配置,不然每次页面更新都会重开一个定时器每个setTimeout用完之后都是立刻销毁的并且由于setInterv ...

在react中使用swiper/react

在react中使用swiper/react相关推荐

最新文章

热门文章