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

編集履歴

質問編集履歴

6

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

2020/12/15 05:37

投稿

ozboze
ozboze

スコア18

title CHANGED
File without changes
body CHANGED
@@ -25,32 +25,36 @@
25
25
 
26
26
  ```html
27
27
  <-- ブラウザレンダリング後 -->
28
+ http://dogsearch.jp/img/inu-sam.jpg
29
+
30
+
28
31
  <div id="slide_area" class="slide_area">
29
32
  <ul class="slider slick-initialized slick-slider">
30
33
  <!-- prev arrow -->
31
- <a class="slick-prev slick-arrow" href="#"><img src="{path}" alt="{hoge}"></a>
34
+ <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>
32
35
 
33
36
  <!-- slide -->
34
37
  <div class="slick-list draggable">
35
38
  <div class="slick-track">
36
39
  <!-- ↓slide-currentがある箇所↓ -->
37
40
  <li id="first" class="slick-slide slick-current slick-active" data-slick-index="-1" aria-hidden="false" tabindex="-1">
38
- <img src="{path}" alt="{hoge}">
41
+ <img src="http://dogsearch.jp/img/inu-sam.jpg" alt="可愛い犬の写真">
39
42
  </li>
40
43
  <li id="second" class="slick-slide slick-cloned" data-slick-index="-1" aria-hidden="true" tabindex="-1">
41
- <img src="{path}" alt="{hoge}">
44
+ <img src="http://dogsearch.jp/img/inu-sam.jpg" alt="可愛い犬の写真">
42
45
  </li>
43
46
  <li id="third" class="slick-slide slick-cloned" data-slick-index="-1" aria-hidden="true" tabindex="-1">
44
- <img src="{path}" alt="{hoge}">
47
+ <img src="http://dogsearch.jp/img/inu-sam.jpg" alt="可愛い犬の写真">
45
48
  </li>
46
49
  </div>
47
50
  </div>
48
51
 
49
52
  <!-- next arrow -->
50
- <a class="slick-next slick-arrow" href="#"><img src="path" alt="hoge"></a>
53
+ <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>
51
54
  </ul>
52
55
  </div>
53
56
 
57
+
54
58
  ```
55
59
 
56
60
 

5

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

2020/12/15 05:37

投稿

ozboze
ozboze

スコア18

title CHANGED
File without changes
body CHANGED
@@ -9,14 +9,16 @@
9
9
 
10
10
  下記にコードを記載いたします。
11
11
 
12
+ ※src、pathなどに格納される任意の値は{src}、{path}と記載しています。
12
13
 
14
+
13
15
  ```html
14
16
  <-- ソース -->
15
17
  <div id="slide_area" class="slide_area">
16
18
  <ul class="slider">
17
- <li id="first"><img src="{path}" alt="hoge"></li>
19
+ <li id="first"><img src="{path}" alt="{hoge}"></li>
18
- <li id="second"><img src="{path}" alt="hoge"></li>
20
+ <li id="second"><img src="{path}" alt="{hoge}"></li>
19
- <li id="third"><img src="{path}" alt="hoge"></li>
21
+ <li id="third"><img src="{path}" alt="{hoge}"></li>
20
22
  </ul>
21
23
  </div>
22
24
  ```
@@ -26,20 +28,20 @@
26
28
  <div id="slide_area" class="slide_area">
27
29
  <ul class="slider slick-initialized slick-slider">
28
30
  <!-- prev arrow -->
29
- <a class="slick-prev slick-arrow" href="#"><img src="path" alt="hoge"></a>
31
+ <a class="slick-prev slick-arrow" href="#"><img src="{path}" alt="{hoge}"></a>
30
32
 
31
33
  <!-- slide -->
32
34
  <div class="slick-list draggable">
33
35
  <div class="slick-track">
34
36
  <!-- ↓slide-currentがある箇所↓ -->
35
37
  <li id="first" class="slick-slide slick-current slick-active" data-slick-index="-1" aria-hidden="false" tabindex="-1">
36
- <img src="path" alt="hoge">
38
+ <img src="{path}" alt="{hoge}">
37
39
  </li>
38
40
  <li id="second" class="slick-slide slick-cloned" data-slick-index="-1" aria-hidden="true" tabindex="-1">
39
- <img src="path" alt="hoge">
41
+ <img src="{path}" alt="{hoge}">
40
42
  </li>
41
43
  <li id="third" class="slick-slide slick-cloned" data-slick-index="-1" aria-hidden="true" tabindex="-1">
42
- <img src="path" alt="hoge">
44
+ <img src="{path}" alt="{hoge}">
43
45
  </li>
44
46
  </div>
45
47
  </div>

4

コメントの追加

2020/12/15 05:25

投稿

ozboze
ozboze

スコア18

title CHANGED
File without changes
body CHANGED
@@ -55,6 +55,7 @@
55
55
  ```js
56
56
  $('#slide_area').on('click', function () {
57
57
  console.log('クリックされました！');
58
+ //戻り値：クリックされました！
58
59
  console.log($('.slick_current'));
59
60
  //戻り値：jQuery.fn.init [prevObject: jQuery.fn.init(1), context: document, selector: ".slick_current"]が返る。
60
61
  　　 //（要素が取得できているはず。。）

3

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

2020/12/15 05:22

投稿

ozboze
ozboze

スコア18

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

2

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

2020/12/15 03:16

投稿

ozboze
ozboze

スコア18

title CHANGED
File without changes
body CHANGED
@@ -56,7 +56,8 @@
56
56
  $('#slide_area').on('click', function () {
57
57
  console.log('クリックされました！');
58
58
  console.log($('.slick_current'));
59
- //戻り値：jQuery.fn.init [prevObject: jQuery.fn.init(1), context: document, selector: ".slick_current"]が返る。（要素が取得できているはず）
59
+ //戻り値：jQuery.fn.init [prevObject: jQuery.fn.init(1), context: document, selector: ".slick_current"]が返る。
60
+ 　　 //（要素が取得できているはず。。）
60
61
  console.log($('.slick_current').attr('id')); //戻り値：undefinedが返る
61
62
  console.log($('.slick_current').prop('id')); //戻り値：undefinedが返る
62
63
  })

1

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

2020/12/15 03:15

投稿

ozboze
ozboze

スコア18

title CHANGED
File without changes
body CHANGED
@@ -56,8 +56,8 @@
56
56
  $('#slide_area').on('click', function () {
57
57
  console.log('クリックされました！');
58
58
  console.log($('.slick_current'));
59
- //jQuery.fn.init [prevObject: jQuery.fn.init(1), context: document, selector: ".slick_current"]が返る。（要素が取得できているはず）
59
+ //戻り値：jQuery.fn.init [prevObject: jQuery.fn.init(1), context: document, selector: ".slick_current"]が返る。（要素が取得できているはず）
60
- console.log($('.slick_current').attr('id')); //undefinedが返る
60
+ console.log($('.slick_current').attr('id')); //戻り値：undefinedが返る
61
- console.log($('.slick_current').prop('id')); //undefinedが返る
61
+ console.log($('.slick_current').prop('id')); //戻り値：undefinedが返る
62
62
  })
63
63
  ```