React.jsにて写真スライダーを作りたい

Question

実現したいこと

React.jsにて下記のリンクのような
写真スライダーを作りたい
https://youtu.be/Zv9KskTYTNQ

前提

投稿されたPostには最大で５枚の写真が含まれていますが
表示する際、５枚並べるのではなく
１枚だけ表示させ、スライダーで写真の切り替えをしたいと思っています。

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

現在は下記写真のように写真が２枚以上あると縦に並んで表示されます。

下記のリンクを参照してみましたが
自分のコードに当てはめるにはどうしたら分からずにおります。。
https://www.npmjs.com/package/react-slideshow-image
もしくは別の方法でうまくいく方法があれば
手段はあまり限定していません。

該当のソースコード

import React, { useState, useEffect, onClick} from 'react';
import axios from 'axios';
import Cookies from 'universal-cookie';
import { apiURL } from './Default';
import { useSelector } from "react-redux";
import { useParams, Link } from 'react-router-dom'

import { useDispatch } from "react-redux";
import { setUserID } from "../stores/user";

import { useForm } from "react-hook-form";


const cookies = new Cookies();

const Top = () => {

  const {id} = useParams();
  const [post, setPost] = useState();
  const isLoggedIn= useSelector(state => state.user.isLoggedIn);
  const userID= useSelector(state => state.user.userID);

  const dispatch = useDispatch();

  const { register, handleSubmit, formState: { errors } } = useForm();

  const [len,setLen] = useState(0)

  const [flug, setFlug] = useState(true)

  const [initial_screen, setInitial] = useState(true)


  useEffect(() => {
    async function fetchData(){
      const result = await axios.get(
        apiURL+'posts/',
        {
          headers: {
              'Content-Type': 'application/json',
            }
        })
        .then(result => {
          setPost(result.data);
          setLen(result.data.length);
          setInitial(true);
          console.log(result.data.length)
          console.log(userID)
          console.log(result.data[0].photo)
          console.log(result.data[0].title)
          console.log(result.data)
          console.log(isLoggedIn)
        })
        .catch(err => {
          console.log(err);
        });
        if (isLoggedIn) {
          const get_user = await axios.get(
            apiURL+'mypage/',
            {
              headers: {
                  'Content-Type': 'application/json',
                  'Authorization': `JWT ${cookies.get('accesstoken')}`
                }
            .then(get_user => {
  
              dispatch(setUserID(get_user.data.id));
            })
            .catch(err => {
              console.log("err");
              console.log(err)
            });
        }

    }
  fetchData();
  },[flug]);

  const getSearchResult = async(data) => {
    console.log(data.search)

    console.log(apiURL+'posts/?search='+ data.search)
    await axios.get(apiURL+'posts/?search='+ data.search,
      {
        headers: {
          'Content-Type': 'application/json',
        },
      })
      .then(result => {
        console.log(result.data);
        console.log(result.data.length);
        setLen(result.data.length);
        setPost(result.data);
        setInitial(false);
        
      })
      .catch(err => {
        console.log("err");
        console.log(err)
      });
}

  return (
      <div className="container">
        <div className="row mx-auto text-center justify-content-center">
            <form onSubmit={handleSubmit(getSearchResult)}>
            <label for="">Title or Maker：</label>
            <input placeholder="Title or Maker" className='form-control' {...register('search', { required: true })} />
            <input className='btn btn-secondary' type="submit" value="Search" />
            </form>
            <p>{len}</p>
            {len >= 1 ?
            initial_screen ? 
            <>
                {post.map((item,i) => (
                  <div key={i} className="top_post col-6 col-lg-3">
                    {item.photo &&<img className="top_post_photo" src={item.photo} />}
                    {item.photo2 &&<img className="top_post_photo" src={item.photo2} />}
                    {item.photo3 &&<img className="top_post_photo" src={item.photo3} />}
                    {item.photo4 &&<img className="top_post_photo" src={item.photo4} />}
                    {item.photo5 &&<img className="top_post_photo" src={item.photo5} />}
                    <p>Title: {item.title}</p>
                    <p>Condition: {item.condition_name}</p>
                    <Link to={`/post/${item.id}`} className='btn btn-secondary'>Detail</Link>
                  </div>
                ))}
            </>
            :
            <>
                {post.map((item,i) => (
                  <div key={i} className="top_post col-6 col-lg-3">
                    {item.photo &&<img className="top_post_photo" src={item.photo} />}
                    {item.photo2 &&<img className="top_post_photo" src={item.photo2} />}
                    {item.photo3 &&<img className="top_post_photo" src={item.photo3} />}
                    {item.photo4 &&<img className="top_post_photo" src={item.photo4} />}
                    {item.photo5 &&<img className="top_post_photo" src={item.photo5} />}
                    <p>Title: {item.title}</p>
                    <p>Condition: {item.condition_name}</p>
                    <Link to={`/post/${item.id}`} className='btn btn-secondary'>Detail</Link>
                  </div>
                ))}
                <button onClick={() => setFlug(!flug)} className='btn btn-secondary'>Back</button>
            </>
            :
            <div>
              <p>{len}</p>
              <p>not found!</p>
              <button onClick={() => setFlug(!flug)} className='btn btn-secondary'>Back</button>
            </div>
          }
          
      </div>
      </div>
  );
}

export default Top;

Answer 1

https://react-bootstrap.netlify.app/components/carousel/#carousel-props

こちらを参照し作ることができました！