ReactJSでSwiperを使い、動的コンテンツを自動でスライドさせることについて

Question

前提・実現したいこと

前提として、ReactJsでSwiper Reactを活用しようとしています。
実現したいことは動的な要素が自動で動くスライダーを作ることです。

（またこちらが初めての質問でして、失礼なこと・情報不足がありましたらお伝えください。）

発生している問題・エラーメッセージ

発生している問題としては、スライダーが自動で動かないことです。
ただ初期の画像とメッセージは表示されています。

以下の状況では、スライダーが自動で動くことが確認できています。

• mapで動的に <SwiperSlide> 内を生成するのではなく、静的なコンテンツを自動で動かす
• 一度画面表示をした後に、画面更新をせずに、再度compileをするとスライダーが自動で動く
• （不明確で恥ずかしいのですが）console画面などを確認したりしていると動く

また現象として、4枚の画像をmapで動的に<SwiperSlide>内で生成しているのですが、初期はindex=3(最後の画像)が表示されています。

該当のソースコード

import React from 'react';
import { Slider } from '../slider/slider';


export class SwiperList extends React.Component {
    render() {
        return (
            <div className="hero">
                <div className="slide">
                    <Slider swiperContents={this.props.swiperContents} />
                </div>
            </div>
        )
    }
}

import React from 'react';

import { Swiper, SwiperSlide} from 'swiper/react';
import SwiperCore, { Autoplay } from 'swiper';
import 'swiper/swiper.scss';

SwiperCore.use([Autoplay]);

export class Slider extends React.Component {
    render() {
        return (
                <div>
                    <Swiper
                     autoplay={{
                     delay: 500,
                     disableOnInteraction: false
                     }}
                      loop={true}
                    >
                        {
                            this.props.swiperContents.map((swiperContent,index) => {
                                return (
                                    <SwiperSlide key={index}> 
                                        <img src={swiperContent.mediaUrl} key={swiperContent.id} alt="" />
                                        <p className="msg">{swiperContent.text}</p>
                                    </SwiperSlide>
                                )
                            })
                        }
                    </Swiper>
                </div>
        )
    }
}

console画面にあるReact Componentsには以下の表示がされています。

Swiper [ForwardRef]
　SwiperSlide key=".$3-duplicate-3-append" [ForwardRef]
　SwiperSlide key=".$0" [ForwardRef]
　SwiperSlide key=".$1" [ForwardRef]
　SwiperSlide key=".$2" [ForwardRef]
　SwiperSlide key=".$3" [ForwardRef]
　SwiperSlide key=".$0-duplicate-0-prepend" [ForwardRef]  

試したこと

• <SwiperSlide>をメソッドでrender
• shouldSwiperUpdate={true},rebuildOnUpdate= {true},observer= {true}を<Swiper>に付与

補足情報（FW/ツールのバージョンなど）

• react@17.0.1
• swiper@6.4.5
• node-sass@4.14.1

Answer 1

[Swiper のドキュメント](Swiper API https://swiperjs.com/api/)を漁ってみましたがどうやらコレ、動的に要素を追加することはあまり考えて作られてないらしいです。`Virtual` という設定もあるようですが「loop や auto 使えへんで」と言ってますし……。react-id-swiperなら React に適した形で key を生成してくれたり、動的にコンテンツを追加したらレンダリングし直す機能もありますし、もちろん Swiper 自身のオプションも使えますのでこちらを使うのが良さそうです。