React SwiperJsの自動再生でスワイパーが自動スワイプしない 質問する

React SwiperJsの自動再生でスワイパーが自動スワイプしない 質問する

私はReactでこのスワイパーを使用しています:出典: https://www.swiperjs.com/react/

「自動再生」にしようとしましたが、自動スワイプされません。試したのは次のとおりです。

// 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>
    )
}

自動再生でブール値を使用するようにも試みましたが、これも機能しません。

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

ベストアンサー1

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

コンポーネントがインストールされていないようですAutoplay


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

おすすめ記事