I want to make a photo slider with React.js - html

Question

I want to make a photo slider like the following link by React.js.
https://youtu.be/Zv9KskTYTNQ
Each post contains a maximum of 5 photos When displaying, I want to display only one photo and switch photos with a slider instead of showing 5 photos.
Issue/error message
Currently, if there are two or more photos as shown below, they will be displayed vertically.
I tried the link below but I don't know how to apply it to my code. . https://www.npmjs.com/package/react-slideshow-image Or if there is another way that works, it will be great.
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, setUserName } 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);
const username = useSelector((state) => state.user.userName);
console.log(username);
let slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides((slideIndex += n));
}
function currentSlide(n) {
showSlides((slideIndex = n));
}
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = slides.length;
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
}
const getPosts = async (data) => {
await axios
.get(apiURL + "posts/", {
headers: {
"Content-Type": "application/json",
},
})
.then((result) => {
setPost(result.data);
setLen(result.data.length);
setInitial(true);
})
.catch((err) => {
console.log(err);
});
};
const getLoginID = async (data) => {
await axios
.get(apiURL + "mypage/", {
headers: {
"Content-Type": "application/json",
Authorization: `JWT ${cookies.get("accesstoken")}`,
},
})
.then((get_user) => {
dispatch(setUserID(get_user.data.id));
dispatch(setUserName(get_user.data.username));
})
.catch((err) => {
console.log(err);
});
};
useEffect(() => {
getPosts();
getLoginID();
}, [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) => {
setLen(result.data.length);
setPost(result.data);。
setInitial(false);
})
.catch((err) => {
console.log(err);
});
};
return (
<div className="container">
<div className="row text-center justify-content-center">
{isLoggedIn ? (
<p className="top_hello">Hello {username}!</p>
) : (
<p className="top_hello">Hello Guest!</p>
)}
<div className="top_search col-10 col-lg-12">
<form
className="top_search_input form-inline col-12 col-lg-4"
onSubmit={handleSubmit(getSearchResult)}
>
<input
placeholder="Search Title or Maker"
className="form-control"
{...register("search", { required: true })}
/>
<input className="btn btn-secondary" type="submit" value="Search" />
</form>
</div>
{len >= 1 ? (
initial_screen ? (
<>
{post.map((item, i) => (
<div key={i} className="top_post col-6 col-lg-3">
<div className="slideshow-container">
{item.photo && (
<div className="mySlides fade">
<img className="top_post_photo" src={item.photo} />
</div>
)}
{item.photo2 && (
<div className="mySlides fade">
<img className="top_post_photo" src={item.photo2} />
</div>
)}
{item.photo3 && (
<div className="mySlides fade">
<img className="top_post_photo" src={item.photo3} />
</div>
)}
{item.photo4 && (
<div className="mySlides fade">
<img className="top_post_photo" src={item.photo4} />
</div>
)}
{item.photo5 && (
<div className="mySlides fade">
<img className="top_post_photo" src={item.photo5} />
</div>
)}
<a className="prev" onclick="plusSlides(-1)">
❮
</a>
<a className="next" onclick="plusSlides(1)">
❯
</a>
</div>
<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;
CSS
* Top.js */
.top_hello {
text-align: right;
margin: 20px 0 0 0;
}
.top_search {
margin: 20px 0 20px 0;
justify-content: right;
}
.top_search_input {
display: flex;
margin-right: 0;
margin-left: auto;
}
.top_post {
/* position: relative; */
background:rgb(209, 255, 209);
padding:15px;
border-radius: 10px;
margin-bottom: 30px;
width: 250px;
height: 400px;
/* margin: 10px; */
}
.top_post_photo {
object-fit: cover;
width: 200px;
height: 200px;
}
/* Slideshow container */
.slideshow-container {
max-width: 200px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}