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

回答編集履歴

2

修正

2017/08/24 05:26

投稿

m.ts10806
m.ts10806

スコア80888

answer CHANGED
@@ -20,7 +20,6 @@
20
20
  </div>
21
21
  </section>
22
22
 
23
- 〈js〉
24
23
  <script>
25
24
  $(function() {
26
25
  $('.slider-for-up').slick({

1

2017/08/24 05:26

投稿

m.ts10806
m.ts10806

スコア80888

answer CHANGED
@@ -1,2 +1,47 @@
1
1
  同じClassを利用しているため同時に動くのだと思います。
2
- IDを振るか、別々のClassを指定して、それぞれslick()の設定を記述してください。
2
+ IDを振るか、別々のClassを指定して、それぞれslick()の設定を記述してください。
3
+
4
+ 例:
5
+ ```html
6
+ <section>
7
+ <div class="slider slider-for-up">
8
+ ~~~省略
9
+ </div>
10
+ <div class="slider slider-nav-up">
11
+ ~~~省略
12
+ </div>
13
+ </section>
14
+ <section>
15
+ <div class="slider slider-for-down">
16
+ ~~~省略
17
+ </div>
18
+ <div class="slider slider-nav-down">
19
+ ~~~省略
20
+ </div>
21
+ </section>
22
+
23
+ 〈js〉
24
+ <script>
25
+ $(function() {
26
+ $('.slider-for-up').slick({
27
+   ~~省略
28
+ asNavFor: '.slider-nav-up'
29
+ });
30
+ $('.slider-nav-up').slick({
31
+   ~~省略
32
+ asNavFor: '.slider-for-up',
33
+   ~~省略
34
+ });
35
+ $('.slider-for-down').slick({
36
+   ~~省略
37
+ asNavFor: '.slider-nav-down'
38
+ });
39
+ $('.slider-nav-down').slick({
40
+   ~~省略
41
+ asNavFor: '.slider-for-down',
42
+   ~~省略
43
+ });
44
+ });
45
+ </script>
46
+
47
+ ```