Q&A
実現したいこと
React.jsにて下記のリンクのような
写真スライダーを作りたい
https://youtu.be/Zv9KskTYTNQ
前提
投稿されたPostには最大で5枚の写真が含まれていますが
表示する際、5枚並べるのではなく
1枚だけ表示させ、スライダーで写真の切り替えをしたいと思っています。
発生している問題・エラーメッセージ
現在は下記写真のように写真が2枚以上あると縦に並んで表示されます。
下記のリンクを参照してみましたが
自分のコードに当てはめるにはどうしたら分からずにおります。。
https://www.npmjs.com/package/react-slideshow-image
もしくは別の方法でうまくいく方法があれば
手段はあまり限定していません。
該当のソースコード
Top.js
1import React, { useState, useEffect, onClick} from 'react'; 2import axios from 'axios'; 3import Cookies from 'universal-cookie'; 4import { apiURL } from './Default'; 5import { useSelector } from "react-redux"; 6import { useParams, Link } from 'react-router-dom' 7 8import { useDispatch } from "react-redux"; 9import { setUserID } from "../stores/user"; 10 11import { useForm } from "react-hook-form"; 12 13 14const cookies = new Cookies(); 15 16const Top = () => { 17 18 const {id} = useParams(); 19 const [post, setPost] = useState(); 20 const isLoggedIn= useSelector(state => state.user.isLoggedIn); 21 const userID= useSelector(state => state.user.userID); 22 23 const dispatch = useDispatch(); 24 25 const { register, handleSubmit, formState: { errors } } = useForm(); 26 27 const [len,setLen] = useState(0) 28 29 const [flug, setFlug] = useState(true) 30 31 const [initial_screen, setInitial] = useState(true) 32 33 34 useEffect(() => { 35 async function fetchData(){ 36 const result = await axios.get( 37 apiURL+'posts/', 38 { 39 headers: { 40 'Content-Type': 'application/json', 41 } 42 }) 43 .then(result => { 44 setPost(result.data); 45 setLen(result.data.length); 46 setInitial(true); 47 console.log(result.data.length) 48 console.log(userID) 49 console.log(result.data[0].photo) 50 console.log(result.data[0].title) 51 console.log(result.data) 52 console.log(isLoggedIn) 53 }) 54 .catch(err => { 55 console.log(err); 56 }); 57 if (isLoggedIn) { 58 const get_user = await axios.get( 59 apiURL+'mypage/', 60 { 61 headers: { 62 'Content-Type': 'application/json', 63 'Authorization': `JWT ${cookies.get('accesstoken')}` 64 } 65 .then(get_user => { 66 67 dispatch(setUserID(get_user.data.id)); 68 }) 69 .catch(err => { 70 console.log("err"); 71 console.log(err) 72 }); 73 } 74 75 } 76 fetchData(); 77 },[flug]); 78 79 const getSearchResult = async(data) => { 80 console.log(data.search) 81 82 console.log(apiURL+'posts/?search='+ data.search) 83 await axios.get(apiURL+'posts/?search='+ data.search, 84 { 85 headers: { 86 'Content-Type': 'application/json', 87 }, 88 }) 89 .then(result => { 90 console.log(result.data); 91 console.log(result.data.length); 92 setLen(result.data.length); 93 setPost(result.data); 94 setInitial(false); 95 96 }) 97 .catch(err => { 98 console.log("err"); 99 console.log(err) 100 }); 101} 102 103 return ( 104 <div className="container"> 105 <div className="row mx-auto text-center justify-content-center"> 106 <form onSubmit={handleSubmit(getSearchResult)}> 107 <label for="">Title or Maker:</label> 108 <input placeholder="Title or Maker" className='form-control' {...register('search', { required: true })} /> 109 <input className='btn btn-secondary' type="submit" value="Search" /> 110 </form> 111 <p>{len}</p> 112 {len >= 1 ? 113 initial_screen ? 114 <> 115 {post.map((item,i) => ( 116 <div key={i} className="top_post col-6 col-lg-3"> 117 {item.photo &&<img className="top_post_photo" src={item.photo} />} 118 {item.photo2 &&<img className="top_post_photo" src={item.photo2} />} 119 {item.photo3 &&<img className="top_post_photo" src={item.photo3} />} 120 {item.photo4 &&<img className="top_post_photo" src={item.photo4} />} 121 {item.photo5 &&<img className="top_post_photo" src={item.photo5} />} 122 <p>Title: {item.title}</p> 123 <p>Condition: {item.condition_name}</p> 124 <Link to={`/post/${item.id}`} className='btn btn-secondary'>Detail</Link> 125 </div> 126 ))} 127 </> 128 : 129 <> 130 {post.map((item,i) => ( 131 <div key={i} className="top_post col-6 col-lg-3"> 132 {item.photo &&<img className="top_post_photo" src={item.photo} />} 133 {item.photo2 &&<img className="top_post_photo" src={item.photo2} />} 134 {item.photo3 &&<img className="top_post_photo" src={item.photo3} />} 135 {item.photo4 &&<img className="top_post_photo" src={item.photo4} />} 136 {item.photo5 &&<img className="top_post_photo" src={item.photo5} />} 137 <p>Title: {item.title}</p> 138 <p>Condition: {item.condition_name}</p> 139 <Link to={`/post/${item.id}`} className='btn btn-secondary'>Detail</Link> 140 </div> 141 ))} 142 <button onClick={() => setFlug(!flug)} className='btn btn-secondary'>Back</button> 143 </> 144 : 145 <div> 146 <p>{len}</p> 147 <p>not found!</p> 148 <button onClick={() => setFlug(!flug)} className='btn btn-secondary'>Back</button> 149 </div> 150 } 151 152 </div> 153 </div> 154 ); 155} 156 157export default Top; 158 159 160 161 162
回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。