質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

296閲覧

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

Tomato_leaf

総合スコア173

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2023/02/08 10:07

実現したいこと

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

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

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

投稿2023/02/12 16:11

Tomato_leaf

総合スコア173

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問