React中使用swiper6配置了自动播放参数,但是不能自动播放

发布于 2022-09-12 22:51:52 字数 2108 浏览 22 评论 0

React中使用swiper6配置了自动播放参数,但是不能自动播放,请问是什么原因?代码如下:


import React from 'react';
import styles from './carousel.module.scss';
import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, { EffectFade } from 'swiper';
import 'swiper/swiper-bundle.css';
import 'swiper/components/effect-fade/effect-fade.scss';
SwiperCore.use([EffectFade]);

const mockData = [
  {
    "title":"标题1",
    "description":"描述1",
    "slideMobileImg":"//m.360buyimg.com/mobilecms/s700x280_jfs/t1/147963/22/2503/175676/5f085783Eaa4d79c7/5e1bf6f0c87780ea.jpg!cr_1125x445_0_171!q70.jpg.dpg",
    "showButton":true,
    "buttonLink":"/doc"
  },
  {
    "title":"标题1",
    "description":"描述1",
    "slideMobileImg":"//m.360buyimg.com/mobilecms/s700x280_jfs/t1/147963/22/2503/175676/5f085783Eaa4d79c7/5e1bf6f0c87780ea.jpg!cr_1125x445_0_171!q70.jpg.dpg",
    "showButton":true,
    "buttonLink":"/doc"
  },
  {
    "title":"标题1",
    "description":"描述1",
    "slideMobileImg":"//m.360buyimg.com/mobilecms/s700x280_jfs/t1/147963/22/2503/175676/5f085783Eaa4d79c7/5e1bf6f0c87780ea.jpg!cr_1125x445_0_171!q70.jpg.dpg",
    "showButton":true,
    "buttonLink":"/doc"
  }
]
export default class Carousel extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      activeIndex: 0
    }
  }
  render() {
    const list = mockData
    return (
      <Swiper effect="fade"
              autoplay={{delay: 5000}}
              pagination={{ clickable: true }}>
        {
          list.map((item, index) => {
            return (
              <SwiperSlide className='swiper-slide' key={item.slideMobileImg + index}>
                ![]({item.slideMobileImg} style={{width: )
                <div className={styles['slide-text']}>
                  <p className={styles['slide-title']}>{item.title}</p>
                  <p className={styles['slide-desc']}>{item.description}</p>
                </div>
              </SwiperSlide>
            )
          })
        }
      </Swiper>
    )
  }
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

伤痕我心 2022-09-19 22:51:52

不是这样用的,就跟你用EffectFade一样需要注入的,你试试 应该有这个模块

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文