Swiper 在 React 中的使用以及苹果设备中存在的问题

Swiper 版本 6.8.4，React 和 ReactDOM版本 16.14.0，需要注意的是，[email protected] 版本用到了 React Hooks ，所以 React 和 ReactDOM 版本一定要大于等于 16.8.0

除示例代码中用到的配置，其他更多配置可查看 Swiper 官方网站

需要注意的是文中在 React 中使用 Swiper 组件的方式参考文档：在 React 中使用 Swiper

Swiper 使用

提取 carousel 轮播组件

index.jsx

/**
 * @author xxx
 * @description 轮播
 * @date 2022-05-27 18:45:27
 */
import React, {
    useState, useEffect } from 'react';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import styles from './index.module.less';
// 引入 Swiper core 和必须的组件
import SwiperCore, {
    Autoplay } from 'swiper';
import {
    Swiper, SwiperSlide } from 'swiper/react';
// 引入 Swiper 样式
import 'swiper/swiper.less';

// 安装 Swiper 组件
SwiperCore.use([Autoplay]);

function Carousel(props) {
   
  const {
    delay, speed, className, list } = props;
  const [swiper, setSwiper] = useState(null); // swiper实例

  const onSwiper = swiper => {
   
    delay && swiper