teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

3

修正

2020/06/20 12:31

投稿

welcome
welcome

スコア10

title CHANGED
File without changes
body CHANGED
@@ -51,6 +51,7 @@
51
51
  </div>
52
52
 
53
53
  <!--— サムネイル ---->
54
+ 下記のように出力したい。
54
55
  <ul class="thumb-list">
55
56
 
56
57
  <?php
@@ -68,8 +69,71 @@
68
69
  </ul>
69
70
  ```
70
71
 
72
+
73
+
71
74
  ```ここに言語を入力
75
+ やりたいこと!
76
+ サムネイル部分
77
+ <ul>
78
+ <li class="thumb-item">
79
+ <a class="thumb-link two" href="javascript:void(0);" onclick="slideThumb(1)">
80
+ <img src=" " >
81
+ </a>
82
+ </li>
83
+ <li class="thumb-item">
84
+ <a class="thumb-link two" href="javascript:void(0);" onclick="slideThumb(2)">
85
+ <img src=" " >
86
+ </a>
87
+ </li>
88
+ <li class="thumb-item">
89
+ <a class="thumb-link three" href="javascript:void(0);" onclick="slideThumb(3)">
90
+ <img src=" " >
91
+ </a>
92
+ </li>
93
+ <li class="thumb-item">
94
+ <a class="thumb-link four" href="javascript:void(0);" onclick="slideThumb(4)">
95
+ <img src=" " >
96
+ </a>
97
+ </li>
98
+ <li class="thumb-item">
99
+ <a class="thumb-link five" href="javascript:void(0);" onclick="slideThumb(5)">
100
+ <img src=" " >
101
+ </a>
102
+ </li>
103
+ <li class="thumb-item">
104
+ <a class="thumb-link six" href="javascript:void(0);" onclick="slideThumb(6)">
105
+ <img src=" " >
106
+ </a>
107
+ </li>
108
+ <li class="thumb-item">
109
+ <a class="thumb-link seven" href="javascript:void(0);" onclick="slideThumb(7)">
110
+ <img src=" " >
111
+ </a>
112
+ </li>
113
+ <li class="thumb-item">
114
+ <a class="thumb-link eight" href="javascript:void(0);" onclick="slideThumb(8)">
115
+ <img src=" " >
116
+ </a>
117
+ </li>
118
+ <li class="thumb-item">
119
+ <a class="thumb-link nine" href="javascript:void(0);" onclick="slideThumb(9)">
120
+ <img src=" " >
121
+ </a>
122
+ </li>
123
+ <li class="thumb-item">
124
+ <a class="thumb-link ten" href="javascript:void(0);" onclick="slideThumb(10)">
125
+ <img src=" " >
126
+ </a>
127
+ </li>
128
+ </ul>
129
+
130
+ ```
131
+
132
+
133
+
134
+
135
+ ```ここに言語を入力
72
- jQueryとswiper.jsを読み込んだ後に下記を記述しています。
136
+ jQueryとswiper.jsを読み込んだ後に下記を記述しています。あんまり関係ないかもですが念のため表記してます。
73
137
  function slideThumb(index) {
74
138
  swiperMain.slideTo(index);
75
139
  }

2

説明の修正を行いました

2020/06/20 12:31

投稿

welcome
welcome

スコア10

title CHANGED
File without changes
body CHANGED
@@ -15,9 +15,17 @@
15
15
  サムネイルの2枚目の時はaタグ内のonclick="slideThumb(2)
16
16
  ・・・
17
17
  一ずつ足した数字を挿入できたらいいと考えました。
18
+ foreach文に中で1ずつプラスされた数字がslideThumb( )の()内に挿入できれば解決しそうです。
19
+ 以下のコードのように試してみたのですが、同じ数字である2しか取得できません。
20
+ slideThumb( )の()内に1,2,3,4,5,6,,,,というように挿入できたら理想なのですが、
21
+ うまくいきませんでした。
18
22
 
23
+ つまり、
24
+ やりたいことは
25
+ サムネイルの1枚目の時はaタグ内のonclick="slideThumb(1)
26
+ サムネイルの2枚目の時はaタグ内のonclick="slideThumb(2)
27
+ ,,,といったようにphpでfor文やforeach文を回して、プラス一ずつされた数字が挿入できたら
19
- かし、うまくせん
28
+ スライダーとサムネイルが連動て動てくれ
20
-
21
29
  どなたかご教授いただけませんでしょうか。
22
30
 
23
31
 

1

JSの記述を追加

2020/06/20 12:26

投稿

welcome
welcome

スコア10

title CHANGED
File without changes
body CHANGED
@@ -58,4 +58,11 @@
58
58
  </li>
59
59
  <?php } ?>
60
60
  </ul>
61
+ ```
62
+
63
+ ```ここに言語を入力
64
+ jQueryとswiper.jsを読み込んだ後に下記を記述しています。
65
+ function slideThumb(index) {
66
+ swiperMain.slideTo(index);
67
+ }
61
68
  ```