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

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

新規登録して質問してみよう
ただいま回答率
87.20%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

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

解決済

React.jsでSwiperの要素をfor文で作成した場合に、ナビゲーションが動かない

nagano0141cafe
nagano0141cafe

総合スコア38

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

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

1回答

0評価

0クリップ

118閲覧

投稿2022/06/26 14:29

閲覧ありがとうございます。
表題の件について、ご教授いただけますと幸いです。

前提

・ReactでSwiperを使用し、画像をスライダー形式で表示する。
・Swiperはnpmで取得し、2022年6月26日の時点で最新のものを使用。

・画像のパスをpropsの配列で取得。
・取得した配列のlengthを基に、for文でSwiperの要素を作成。(ここで行き詰まり)

実現したいこと

for文でSwiperの要素を作成し、画像をスライダー形式で表示できること。

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

画像の表示まではできたが、ナビゲーションのボタンを押下しても次の画像がスライドされてこない。

該当のソースコード

js

//コンポーネント import WorksDisplay from '../components/WorksDisplay'; import WorksDetails from '../components/WorksDetails'; import CommonFooter from '../components/CommonFooter'; function Works() { // タブ切り替え処理 const activeTabIndex = () => { const tabs = document.getElementsByClassName('works-tab-index'); for(let i = 0; i < tabs.length; i++) { tabs[i].addEventListener('click', tabSwitch, false); } function tabSwitch() { document.getElementsByClassName('is-active')[0].classList.remove('is-active'); this.classList.add('is-active'); // コンテンツのclassの値を変更 document.getElementsByClassName('is-show')[0].classList.remove('is-show'); const arrayTabs = Array.prototype.slice.call(tabs); const index = arrayTabs.indexOf(this); document.getElementsByClassName('works-performance')[index].classList.add('is-show'); } } return ( <div className="works content"> <div className="contents-index"> <h2>Works</h2> </div> <p className="works-text"> 制作実績です。主に個人としてのWeb(デザインとコーディング)制作の記録です。 </p> <ul id="works-tab" className="works-tab"> <li className="works-tab-index is-active" onClick={activeTabIndex}>WebDesign</li> <li className="delimiter-icon"></li> <li className="works-tab-index" onClick={activeTabIndex}>Cording</li> </ul> <div className="works-performance is-show"> <ul className="works-performance-list"> <li className="works-performance-list-item"> <WorksDisplay siteThumbnail="/images/thumbnails/XXXX.png" siteName="XXXX" siteType="サイト" /> </li> </ul> <ul className="performance-details"> <li className="performance-details-item"> <WorksDetails siteName="XXXX" siteType="サイト" slideImg={['/images/thumbnails/XXXX.png', '/images/thumbnails/XXXX.png', '/images/thumbnails/XXXX.png']} siteUrl="XXX" myJob="コーディング" tools="AtoM" language="HTML/CSS/JS/React.js" siteIntroduce="XXX" /> </li> </ul> </div> <div className="works-performance"> <p>index02</p> </div> </div> ); } export default Works;

jsx

//Swiper import React, { useRef } from "react"; // import Swiper JS import Swiper from 'swiper'; import 'swiper/css'; import SwiperCore, { Pagination, Navigation } from "swiper"; SwiperCore.use([Pagination, Navigation]); const WorksDetails = (props) => { // サイト名の取得 const siteName = props.siteName; // サイトの種類の取得 const siteType = props.siteType; // スライダーの配列を取得 const slideImg = props.slideImg; // サイトURLの取得 const siteUrl = props.siteUrl; // 担当の取得 const myJob = props.myJob; // 使用ツールの取得 const tools = props.tools; // 使用言語の取得 const language = props.language; // 説明の取得 const siteIntroduce = props.siteIntroduce; // slideViewを基にスライダーのタグを生成 window.onload = function() { let slideArr = []; for(let i = 0; i < slideImg.length; i++) { slideArr.push('<div className="swiper-slide"><img src="' + slideImg[i] + '" /></div>'); } let parentDiv = document.getElementsByClassName('swiper-wrapper'); parentDiv.innerHTML = slideArr.join(''); const swiper = new Swiper('.swiper', { loop: true, pagination: { el: '.swiper-pagination', }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }); } return ( <> <div className="performance-details-contents"> <h3 className="site-name">{siteName}</h3> <p className="site-type">{siteType}</p> <div className="swiper-area"> <div className="swiper"> <div className="swiper-wrapper"> // <div className="swiper-slide"> // <img src="/images/thumbnails/XXXX.png" /> // </div> // <div className="swiper-slide"> // <img src="/images/thumbnails/XXXX.png" /> // </div> // <div className="swiper-slide"> // <img src="/images/thumbnails/XXXX.png" /> // </div> </div> <div className="swiper-pagination"></div> <div className="swiper-scrollbar"></div> </div> <div className="swiper-button-prev"></div> <div className="swiper-button-next"></div> </div> <h4 className="performance-details-index">URL</h4> <p className="performance-details-text"> <a href={siteUrl}>{siteUrl}</a> </p> <h4 className="performance-details-index">担当</h4> <p className="performance-details-text">{myJob}</p> <h4 className="performance-details-index">使用ツール</h4> <p className="performance-details-text">{tools}</p> <h4 className="performance-details-index">使用言語</h4> <p className="performance-details-text">{language}</p> <p className="performance-details-text introduce">{siteIntroduce}</p> </div> </> ) } export default WorksDetails;

css

/* ****************************************** Works Contents ****************************************** */ .works-text { margin-top: 4.8rem; text-align: center; } .works-tab { display: flex; justify-content: center; align-items: center; margin-top: 4.0rem; } .works-tab-index { position: relative; display: flex; align-items: center; cursor: pointer; } .works-tab-index.is-active::after { content: ""; position: absolute; bottom: -0.8rem; left: 0; display: block; background-color: #333; height: 2px; width: 100%; } .delimiter-icon::after { content: "/"; display: block; color: #333; margin: 0 2.4rem; } .works-performance { display: none; } .works-performance.is-show { display: block; } .works-performance-list-item { width: 240px; cursor: pointer; } .works-performance-list-item img { display: block; border: 1px solid #808080; height: auto; width: 100%; } .site-name { font-size: 1.8rem; font-weight: 700; margin-top: 0.8rem; text-align: center; } .site-type { font-size: 1.4rem; text-align: center; } .performance-details-item { position: fixed; top: 0; left: 0; height: 100%; width: 100%; background-color: rgba(0, 0, 0, .5); z-index: 5; } .performance-details-contents { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; height: 600px; width: 920px; padding: 2.4rem; overflow-y: auto; } .performance-details-contents a { color: #000; } .performance-details-index { font-weight: 700; } .performance-details-index, .performance-details-text.introduce { margin-top: 1.6rem; } .performance-details-text { margin-top: 0.8rem; } .swiper-area { position: relative; width: 600px; height: 300px; margin: 0 auto; } .swiper { position: relative; width: 100%; height: 100%; } .swiper-slide { width: 100%!important; } .swiper img { width: 600px; } .swiper-button-prev, .swiper-button-next { position: absolute; top: 50%; transform: translateY(-50%); display: block; height: 40px; width: 40px; background-color: #000; } .swiper-button-prev { left: -6.4rem; } .swiper-button-next { right: -6.4rem; }

試したこと

①要素作成のfor文の記述をloadが完了する前/後に移動させる。
→let parentDiv = document.getElementsByClassName('swiper-wrapper');の処理がnullになるため、なし。

②return()内のswiper-wrapperクラス配下に<div className="swiper-slide"><img src="/images/thumbnails/XXXX.png" /></div>を記載した。
→正常に動く。そのため、for文の箇所が問題であることは判明したが、修正方法で行き詰まり。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

hoshi-takanori

2022/06/27 02:42

React で getElementsByClassName とか addEventListener とか使うのはたぶん間違ってます。
nagano0141cafe

2022/06/28 04:56

ありがとうございます。 そのあたりの知識が薄いので調べてみようと思います。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

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