teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問現在表示されているスライド(slick)のidを取得したい

編集履歴

質問編集履歴

6

画像に絶対パス指定のアセットを記述

2020/12/15 05:37

投稿

ozboze
ozboze

スコア18

test CHANGED
File without changes
test CHANGED
@@ -52,13 +52,19 @@
52
52
 
53
53
  <-- ブラウザレンダリング後 -->
54
54
 
55
+ http://dogsearch.jp/img/inu-sam.jpg
56
+
57
+
58
+
59
+
60
+
55
61
  <div id="slide_area" class="slide_area">
56
62
 
57
63
  <ul class="slider slick-initialized slick-slider">
58
64
 
59
65
  <!-- prev arrow -->
60
66
 
61
- <a class="slick-prev slick-arrow" href="#"><img src="{path}" alt="{hoge}"></a>
67
+ <a class="slick-prev slick-arrow" href="#"><img src="https://cdn.icon-icons.com/icons2/685/PNG/512/left_icon-icons.com_61213.png" alt="左矢印SVG画像"></a>
62
68
 
63
69
 
64
70
 
@@ -72,19 +78,19 @@
72
78
 
73
79
  <li id="first" class="slick-slide slick-current slick-active" data-slick-index="-1" aria-hidden="false" tabindex="-1">
74
80
 
75
- <img src="{path}" alt="{hoge}">
81
+ <img src="http://dogsearch.jp/img/inu-sam.jpg" alt="可愛い犬の写真">
76
82
 
77
83
  </li>
78
84
 
79
85
  <li id="second" class="slick-slide slick-cloned" data-slick-index="-1" aria-hidden="true" tabindex="-1">
80
86
 
81
- <img src="{path}" alt="{hoge}">
87
+ <img src="http://dogsearch.jp/img/inu-sam.jpg" alt="可愛い犬の写真">
82
88
 
83
89
  </li>
84
90
 
85
91
  <li id="third" class="slick-slide slick-cloned" data-slick-index="-1" aria-hidden="true" tabindex="-1">
86
92
 
87
- <img src="{path}" alt="{hoge}">
93
+ <img src="http://dogsearch.jp/img/inu-sam.jpg" alt="可愛い犬の写真">
88
94
 
89
95
  </li>
90
96
 
@@ -96,11 +102,13 @@
96
102
 
97
103
  <!-- next arrow -->
98
104
 
99
- <a class="slick-next slick-arrow" href="#"><img src="path" alt="hoge"></a>
105
+ <a class="slick-next slick-arrow" href="#"><img src="https://cdn.icon-icons.com/icons2/685/PNG/512/right_icon-icons.com_61212.png" alt="右矢印SVG画像"></a>
100
106
 
101
107
  </ul>
102
108
 
103
109
  </div>
110
+
111
+
104
112
 
105
113
 
106
114
 

5

任意の値に関する注意事項を追加

2020/12/15 05:37

投稿

ozboze
ozboze

スコア18

test CHANGED
File without changes
test CHANGED
@@ -20,6 +20,10 @@
20
20
 
21
21
 
22
22
 
23
+ ※src、pathなどに格納される任意の値は{src}、{path}と記載しています。
24
+
25
+
26
+
23
27
 
24
28
 
25
29
  ```html
@@ -30,11 +34,11 @@
30
34
 
31
35
  <ul class="slider">
32
36
 
33
- <li id="first"><img src="{path}" alt="hoge"></li>
37
+ <li id="first"><img src="{path}" alt="{hoge}"></li>
34
38
 
35
- <li id="second"><img src="{path}" alt="hoge"></li>
39
+ <li id="second"><img src="{path}" alt="{hoge}"></li>
36
40
 
37
- <li id="third"><img src="{path}" alt="hoge"></li>
41
+ <li id="third"><img src="{path}" alt="{hoge}"></li>
38
42
 
39
43
  </ul>
40
44
 
@@ -54,7 +58,7 @@
54
58
 
55
59
  <!-- prev arrow -->
56
60
 
57
- <a class="slick-prev slick-arrow" href="#"><img src="path" alt="hoge"></a>
61
+ <a class="slick-prev slick-arrow" href="#"><img src="{path}" alt="{hoge}"></a>
58
62
 
59
63
 
60
64
 
@@ -68,19 +72,19 @@
68
72
 
69
73
  <li id="first" class="slick-slide slick-current slick-active" data-slick-index="-1" aria-hidden="false" tabindex="-1">
70
74
 
71
- <img src="path" alt="hoge">
75
+ <img src="{path}" alt="{hoge}">
72
76
 
73
77
  </li>
74
78
 
75
79
  <li id="second" class="slick-slide slick-cloned" data-slick-index="-1" aria-hidden="true" tabindex="-1">
76
80
 
77
- <img src="path" alt="hoge">
81
+ <img src="{path}" alt="{hoge}">
78
82
 
79
83
  </li>
80
84
 
81
85
  <li id="third" class="slick-slide slick-cloned" data-slick-index="-1" aria-hidden="true" tabindex="-1">
82
86
 
83
- <img src="path" alt="hoge">
87
+ <img src="{path}" alt="{hoge}">
84
88
 
85
89
  </li>
86
90
 

4

コメントの追加

2020/12/15 05:25

投稿

ozboze
ozboze

スコア18

test CHANGED
File without changes
test CHANGED
@@ -112,6 +112,8 @@
112
112
 
113
113
  console.log('クリックされました！');
114
114
 
115
+ //戻り値：クリックされました！
116
+
115
117
  console.log($('.slick_current'));
116
118
 
117
119
  //戻り値：jQuery.fn.init [prevObject: jQuery.fn.init(1), context: document, selector: ".slick_current"]が返る。

3

タイトルをわかりやすく変更

2020/12/15 05:22

投稿

ozboze
ozboze

スコア18

test CHANGED
@@ -1 +1 @@
1
- 現在表示されているスライドのidを取得したい
1
+ 現在表示されているスライド(slick)のidを取得したい
test CHANGED
File without changes

2

jsのコメントアウトに改行を追加

2020/12/15 03:16

投稿

ozboze
ozboze

スコア18

test CHANGED
File without changes
test CHANGED
@@ -114,7 +114,9 @@
114
114
 
115
115
  console.log($('.slick_current'));
116
116
 
117
- //戻り値：jQuery.fn.init [prevObject: jQuery.fn.init(1), context: document, selector: ".slick_current"]が返る。（要素が取得できているはず）
117
+ //戻り値：jQuery.fn.init [prevObject: jQuery.fn.init(1), context: document, selector: ".slick_current"]が返る。
118
+
119
+ 　　 //（要素が取得できているはず。。）
118
120
 
119
121
  console.log($('.slick_current').attr('id')); //戻り値：undefinedが返る
120
122
 

1

jsのコメントアウトを修正

2020/12/15 03:15

投稿

ozboze
ozboze

スコア18

test CHANGED
File without changes
test CHANGED
@@ -114,11 +114,11 @@
114
114
 
115
115
  console.log($('.slick_current'));
116
116
 
117
- //jQuery.fn.init [prevObject: jQuery.fn.init(1), context: document, selector: ".slick_current"]が返る。（要素が取得できているはず）
117
+ //戻り値：jQuery.fn.init [prevObject: jQuery.fn.init(1), context: document, selector: ".slick_current"]が返る。（要素が取得できているはず）
118
118
 
119
- console.log($('.slick_current').attr('id')); //undefinedが返る
119
+ console.log($('.slick_current').attr('id')); //戻り値：undefinedが返る
120
120
 
121
- console.log($('.slick_current').prop('id')); //undefinedが返る
121
+ console.log($('.slick_current').prop('id')); //戻り値：undefinedが返る
122
122
 
123
123
  })
124
124