React SwiperJs 自动播放不会使刷卡器自动刷卡 [英] React SwiperJs autoplay not making the swiper to auto swipe

问题描述

我在 React 中使用这个 swiper:https://swiperjs.com/react/

我试着让它自动播放".但它不会自动滑动.这是我尝试过的:

//https://swiperjs.com/get-started/从反应"导入反应；从'swiper/react'导入{Swiper，SwiperSlide}；从@material-ui/core/styles"导入 { makeStyles }；常量 useStyles = makeStyles({刷卡样式:{背景颜色:'#f5f5f5',高度:'58px'，宽度:'100%'，},});导出默认函数 TextInfoSlider(props) {常量类 = useStyles();返回 (
<刷卡器循环={真}自动播放={{延迟:500，disableOnInteraction:假}}><SwiperSlide>幻灯片 1</SwiperSlide><SwiperSlide>幻灯片 2</SwiperSlide><SwiperSlide>幻灯片 3</SwiperSlide><SwiperSlide>幻灯片 4</SwiperSlide></Swiper><样式 jsx 全局>{`.swiper 容器 {背景颜色:#f5f5f5；}`}</style></div>)}

我也尝试在自动播放中只使用布尔值，但它也不起作用:

 <Swiper循环={真}自动播放={真}}}>

解决方案

默认情况下，Swiper React 使用 Swiper 的核心版本(没有任何附加组件).如果要使用 Navitation、Pagination 等组件，必须先安装

您似乎没有安装 Autoplay 组件.

从'swiper'导入SwiperCore，{自动播放}；...SwiperCore.use([自动播放]);

I am using this swiper in React: https://swiperjs.com/react/

I tried to make it "autoplay" but it doesn't auto swipe. This is what I tried:

// https://swiperjs.com/get-started/
import React from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
    SwiperStyle: {
        backgroundColor: '#f5f5f5',
        height: '58px',
        width: '100%',
    },
});

export default function TextInfoSlider(props) {
    const classes = useStyles();

    return (
        <div>

            <Swiper
                loop={true}
                autoplay={{
                    delay: 500,
                    disableOnInteraction: false
                }}
            >

                <SwiperSlide>Slide 1</SwiperSlide>
                <SwiperSlide>Slide 2</SwiperSlide>
                <SwiperSlide>Slide 3</SwiperSlide>
                <SwiperSlide>Slide 4</SwiperSlide>

            </Swiper>

            <style jsx global>{`
                    .swiper-container {
                        background-color: #f5f5f5;
                    }
           `}</style>
        </div>
    )
}

I have also tried to just use boolean on the autoplay but it also doesn't work:

        <Swiper
            loop={true}
            autoplay={true}
            }}
        >

解决方案

By default Swiper React uses core version of Swiper (without any additional components). If you want to use Navitation, Pagination and other components, you have to install them first

It does not seem you have installed Autoplay component.

import SwiperCore, { Autoplay } from 'swiper';
...
SwiperCore.use([Autoplay]);

这篇关于React SwiperJs 自动播放不会使刷卡器自动刷卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！