react中各类轮播swiper、走马灯Carousel使用(ant.design、antd-mobile、swiper整合文档)

react的 轮播图(要么叫做:走马灯)方案:要么引用ui框架,要么引用插件,要么自己手写(不建议,要处理兼容,有坑)。

本文目录:
一:antd-mobile(V2)使用Carousel走马灯
二:antd-mobile(V5)使用Swiper轮播
三:ant design 使用Swiper轮播
四:引用swiper插件

一:antd-mobile(V2) 走马灯Carousel

点击查看官方案例 https://antd-mobile-v2.surge.sh/components/carousel-cn#components-carousel-demo-lottery

引用(哪个都行):

npm方式:
	npm install --save antd-mobile

cnpm方式:
	cnpm install --save antd-mobile

yarn方式:
	yarn add antd-mobile

调用:

import React, { useState } from 'react';
import { Carousel } from 'antd-mobile';

export default function () {
  const [bannerList, setBannerList] = useState([
    'https://zos.alipayobjects.com/rmsportal/AiyWuByWklrrUDlFignR.png',
    'https://zos.alipayobjects.com/rmsportal/TekJlZRVCjLFexlOCuWn.png',
    'https://zos.alipayobjects.com/rmsportal/IJOtIlfsYdTyaDTRVrLI.png',
  ]);

  {/* 轮播 */ }
  return (
    <Carousel
      autoplay
      infinite
      autoplayInterval={2000}
      className='bannerSwiper'
    >
      {bannerList.map(val => (
        <img
          key={val}
          src={val}
          alt=""
          style={{ width: '100%', verticalAlign: 'top' }}
        />
      ))}
    </Carousel>
  )
}

二:antd-mobile(V5) 使用轮播

点击查看官方案例 https://mobile.ant.design/components/swiper

引用(哪个都行):

npm方式:
	npm install --save antd-mobile@next

cnpm方式:
	cnpm install --save antd-mobile@next

yarn方式:
	yarn add antd-mobile@next

调用:


import React, { useRef } from 'react'
import { Swiper } from 'antd-mobile'

const bannerList = [
  'https://zos.alipayobjects.com/rmsportal/AiyWuByWklrrUDlFignR.png',
  'https://zos.alipayobjects.com/rmsportal/TekJlZRVCjLFexlOCuWn.png',
  'https://zos.alipayobjects.com/rmsportal/IJOtIlfsYdTyaDTRVrLI.png',
];

const items = bannerList.map((item, index) => (
  <Swiper.Item key={index}>
    <img
      src={item}
      alt=''
    />
  </Swiper.Item>
))

export default () => {
  return (
    <Swiper
      loop
      autoplay
    >
      {items}
    </Swiper>
  )
}

三:ant design 使用轮播

点击查看官方案例 https://ant.design/components/carousel-cn/

引用(哪个都行):

npm方式:
	npm install --save antd

cnpm方式:
	cnpm install --save antd

yarn方式:
	yarn add antd

调用:

import React, { useState } from 'react';
import { Carousel } from 'antd';

export default function () {
  const [bannerList, setBannerList] = useState([
    'https://zos.alipayobjects.com/rmsportal/AiyWuByWklrrUDlFignR.png',
    'https://zos.alipayobjects.com/rmsportal/TekJlZRVCjLFexlOCuWn.png',
    'https://zos.alipayobjects.com/rmsportal/IJOtIlfsYdTyaDTRVrLI.png',
  ]);

  return (
    <Carousel
      autoplay
    >
      {bannerList.map((item, index) => {
        return (
          <img
            src={item}
            alt=''
          />
        )
      })}
    </Carousel>
  )
}

四:引用swiper插件

引用(哪个都行):

npm方式:
	npm install --save swiper

cnpm方式:
	cnpm install --save swiper

yarn方式:
	yarn add swiper

使用:

import React, { useState } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, { Autoplay, Pagination } from 'swiper';

SwiperCore.use([Autoplay, Pagination]);
export default function () {
  const [bannerList, setBannerList] = useState([
    'https://zos.alipayobjects.com/rmsportal/AiyWuByWklrrUDlFignR.png',
    'https://zos.alipayobjects.com/rmsportal/TekJlZRVCjLFexlOCuWn.png',
    'https://zos.alipayobjects.com/rmsportal/IJOtIlfsYdTyaDTRVrLI.png',
  ]);

  {/* 轮播 */ }
  return (
    <Swiper
      autoplay={{ delay: 2500, disableOnInteraction: false }}
      pagination={{ clickable: true }}
    >
      {bannerList.map((item, index) => {
        return (
          <SwiperSlide key={index}>
            <div className='banners-wrap'>
              <img
                src={item}
                alt=''
              />
            </div>
          </SwiperSlide>
        );
      })}
    </Swiper>
  )
}

到此,基本上常用的react中各类使用情况都包括了。有兴趣的手写也可以。

  • 4
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值