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

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

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

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

プラグイン

プラグイン(plug-in)は、ソフトウェアアプリケーションの機能拡張の為に開発された、一組のソフトウェアコンポーネントのことを指します。

JavaScript

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

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

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

Q&A

0回答

774閲覧

Swiperのサムネイルがカレント表示できない (Next.js x TypeScript)

yalex

総合スコア0

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

プラグイン

プラグイン(plug-in)は、ソフトウェアアプリケーションの機能拡張の為に開発された、一組のソフトウェアコンポーネントのことを指します。

JavaScript

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

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

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

0グッド

0クリップ

投稿2022/09/25 02:33

編集2022/09/25 20:32

前提・問題

Next.js + TypeScript環境下で、
プラグイン「Swiper」で画像のスライドショーを実装中です。

初期表示時にサムネイルのカレント表示することができない状況です。
(クリックすると、その時点以降はカレント表示は動作するようになります)

実現したいこと

  • 初期表示時に、サムネイルに「.swiper-slide-thumb-active」というクラスを付与したい
    • 初期表示時のコールバックを特定したい (おそらく「onInit」か「onAfterInit」)
    • サムネイルに「.swiper-slide-thumb-active」を付与するためのSwiperの処理を記述したい

該当のソースコード

TypeScript

1 // 前略 2 return ( 3 <> 4 <Swiper 5 slidesPerView={1} 6 navigation={false} 7 loop={false} 8 initialSlide={0} // NOTE: 試しに追加。挙動に変化なし 9 modules={[Thumbs]} 10 thumbs={{ swiper: thumbsSwiper }} 11 > 12 {props.Images.map((src: string, index: number) => { 13 return ( 14 <SwiperSlide key={`${index}`}> 15 <Image src={src} layout="responsive" width={480} height={480} /> 16 </SwiperSlide> 17 ); 18 })} 19 </Swiper> 20 21 <Swiper 22 slidesPerView={10} 23 spaceBetween={4} 24 pagination={false} 25 navigation={false} 26 loop={false} 27 initialSlide={0} // NOTE: 試しに追加。挙動に変化なし 28 modules={[Thumbs]} 29 watchSlidesProgress 30 onSwiper={(swiper) => { 31 setThumbsSwiper; 32 }} 33 onClick={setThumbsSwiper} 34 onInit={(swiper) => { 35 // NOTE: クリック時に実行されて、カレント表示ができている 36 // 「setThumbsSwiper」をonInit時にも実行。うまくいかない。 37 console.log('thumbnail 初期化後'); 38 setThumbsSwiper; 39 }} 40 > 41 {thumbImages.map((src: string, index: number) => { 42 return ( 43 <SwiperSlide key={`${index}`}> 44 <Image src={src} layout="responsive" width={40} height={40} /> 45 </SwiperSlide> 46 ); 47 })} 48 </Swiper> 49 </> 50 ); 51 // 後略

(一部手を加えています。)

試したこと

  • https://swiperjs.com/swiper-api
    https://swiperjs.com/react
    を参考に「onInit」「onAfterInit」にて、「setThumbsSwiper」を実行 (しているつもり)。
    (「setThumbsSwiper」はクリック時に実行され、その際にはカレント表示も描画される。)

  • サムネイルのほうに「initialSlide={0}」を指定 (変化なし)

補足情報(FW/ツールのバージョンなど)

Next.js: 12.2.3
React: 18.1.0
TypeScript: 4.6.4
Swiper: 8.1.6

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

アカウントをお持ちの方は

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

ただいまの回答率
85.47%

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

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

質問する

関連した質問