Q&A
（質問文は編集できます）JavaScriptの関数「slideThumb」も質問文にコードブロックで追記してください。
swiper.jsを用いてスライダーとサムネイルの機能を作成したい。
smart custom fieldというプラグインを用いて、任意の枚数の画像を繰り返し投稿できる形にしているため
親要素img_groupの中のimgを表示させる仕様にしています。
画像の表示まではうまくいったのですが、サムネイルがうまく機能しません。
サムネイルの画像1を押したら、スライダーの画像1が表示される。
サムネイルの画像2を押したら、スライダーの画像2が表示される。
・・・・
といった具合にしたいと考えています。
そのためには
サムネイルのaタグ内の
onclick="slideThumb()"の（）に入る数字を1,2,3,4,,,といった具合に
サムネイルの1枚目の時はaタグ内のonclick="slideThumb(1)
サムネイルの2枚目の時はaタグ内のonclick="slideThumb(2)
・・・
一ずつ足した数字を挿入できたらいいと考えました。
foreach文に中で1ずつプラスされた数字がslideThumb( )の（）内に挿入できれば解決しそうです。
以下のコードのように試してみたのですが、同じ数字である2しか取得できません。
slideThumb( )の（）内に1,2,3,4,5,6,,,,というように挿入できたら理想なのですが、
うまくいきませんでした。
つまり、
やりたいことは
サムネイルの1枚目の時はaタグ内のonclick="slideThumb(1)
サムネイルの2枚目の時はaタグ内のonclick="slideThumb(2)
,,,といったようにphpでfor文やforeach文を回して、プラス一ずつされた数字が挿入できたら
スライダーとサムネイルが連動して動いてくれます。
どなたかご教授いただけませんでしょうか。
<!-- メイン --> <div class="swiper-container"> <div class="swiper-wrapper"> <?php $imggroup = SCF::get('img_group'); foreach ($imggroup as $fields ) { $imgurl = wp_get_attachment_image_src($fields['img'] , 'full'); ?> <div class="swiper-slide one"> <img src="<?php echo $imgurl[0]; ?>" > </div> <?php } ?> </div> </div> <!--— サムネイル ----> 下記のように出力したい。 <ul class="thumb-list"> <?php $imggroup = SCF::get('img_group'); foreach ($imggroup as $fields ) { $imgurl = wp_get_attachment_image_src($fields['img'] , 'full'); $i = 1; ?> <li class="thumb-item"> <a class="thumb-link one" href="javascript:void(0);" onclick="slideThumb(<?php echo $i++; ?>)"> <img src="<?php echo $imgurl[0]; ?>" > </a> </li> <?php } ?> </ul>
やりたいこと！ サムネイル部分 <ul> <li class="thumb-item"> <a class="thumb-link two" href="javascript:void(0);" onclick="slideThumb(1)"> <img src=" " > </a> </li> <li class="thumb-item"> <a class="thumb-link two" href="javascript:void(0);" onclick="slideThumb(2)"> <img src=" " > </a> </li> <li class="thumb-item"> <a class="thumb-link three" href="javascript:void(0);" onclick="slideThumb(3)"> <img src=" " > </a> </li> <li class="thumb-item"> <a class="thumb-link four" href="javascript:void(0);" onclick="slideThumb(4)"> <img src=" " > </a> </li> <li class="thumb-item"> <a class="thumb-link five" href="javascript:void(0);" onclick="slideThumb(5)"> <img src=" " > </a> </li> <li class="thumb-item"> <a class="thumb-link six" href="javascript:void(0);" onclick="slideThumb(6)"> <img src=" " > </a> </li> <li class="thumb-item"> <a class="thumb-link seven" href="javascript:void(0);" onclick="slideThumb(7)"> <img src=" " > </a> </li> <li class="thumb-item"> <a class="thumb-link eight" href="javascript:void(0);" onclick="slideThumb(8)"> <img src=" " > </a> </li> <li class="thumb-item"> <a class="thumb-link nine" href="javascript:void(0);" onclick="slideThumb(9)"> <img src=" " > </a> </li> <li class="thumb-item"> <a class="thumb-link ten" href="javascript:void(0);" onclick="slideThumb(10)"> <img src=" " > </a> </li> </ul>
jQueryとswiper.jsを読み込んだ後に下記を記述しています。あんまり関係ないかもですが念のため表記してます。 function slideThumb(index) { swiperMain.slideTo(index); }
回答1件
0
ベストアンサー
$i = 1;の場所の問題です。
PHP
1 <?php 2 $imggroup = SCF::get('img_group'); 3 $i = 1; // foreach の外で初期化しないと、全部同じ数値になる 4 foreach ($imggroup as $fields ) { 5 $imgurl = wp_get_attachment_image_src($fields['img'] , 'full'); 6 //$i = 1; 7 ?> 8 <li class="thumb-item"> 9 <a class="thumb-link one" href="javascript:void(0);" onclick="slideThumb(<?php echo $i++; ?>)"> 10 <img src="<?php echo $imgurl[0]; ?>" > 11 </a> 12 </li> 13 <?php } ?>
投稿2020/06/20 12:32
総合スコア69583
あなたの回答
tips
プレビュー
