teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問スリックスライダーの次へボタンを最初はアクティブに、中間では両方アクティブに、最後まで行くと戻るボタンだけアクティブにしたい。

編集履歴

質問編集履歴

3

文言を修正しました。

2019/08/07 09:19

投稿

UKYO9311
UKYO9311

スコア31

test CHANGED
File without changes
test CHANGED
@@ -8,11 +8,11 @@
8
8
 
9
9
 
10
10
 
11
- ・ 初期では"次へ"だけがアクティブ
11
+ ・ 初期では"次へ"だけがアクティブ色になる
12
-
12
+
13
- ・ 中間では"次へ"と"戻る"がアクティブ
13
+ ・ 中間では"次へ"と"戻る"がアクティブ色になる
14
-
14
+
15
- ・ 最後では"戻る"だけがアクティブ
15
+ ・ 最後では"戻る"だけがアクティブ色になる
16
16
 
17
17
 
18
18
 
@@ -24,6 +24,12 @@
24
24
 
25
25
 
26
26
 
27
+ 現時点では、全部アクティブ色になってしまっています。
28
+
29
+
30
+
31
+
32
+
27
33
  お手数おかけしますがご回答お待ちしております（ ; ; ）
28
34
 
29
35
 

2

コードを追加しました。

2019/08/07 09:18

投稿

UKYO9311
UKYO9311

スコア31

test CHANGED
File without changes
test CHANGED
@@ -98,6 +98,8 @@
98
98
 
99
99
  ```css
100
100
 
101
+
102
+
101
103
  /* Slider2 */
102
104
 
103
105
 
@@ -340,6 +342,182 @@
340
342
 
341
343
 
342
344
 
345
+
346
+
347
+
348
+
349
+
350
+
351
+ .slider2 {
352
+
353
+ position: relative;
354
+
355
+ }
356
+
357
+
358
+
359
+ .slider2 .slick-next {
360
+
361
+ position: absolute;
362
+
363
+ right: 0;
364
+
365
+ bottom: -30px;
366
+
367
+
368
+
369
+ font-size: 0;
370
+
371
+ line-height: 0;
372
+
373
+ width: 3.8rem;
374
+
375
+ height: 3.8rem;
376
+
377
+ border-radius: 50%;
378
+
379
+ display: block;
380
+
381
+ padding: 0;
382
+
383
+ -webkit-transform: translate(0, -50%);
384
+
385
+ -ms-transform: translate(0, -50%);
386
+
387
+ transform: translate(0, -50%);
388
+
389
+ cursor: pointer;
390
+
391
+ color: transparent;
392
+
393
+ border: none;
394
+
395
+ outline: none;
396
+
397
+ background: transparent;
398
+
399
+ border: 1px solid #0088c4;
400
+
401
+ padding-top: 3px;
402
+
403
+ }
404
+
405
+
406
+
407
+ .slider2 .slick-next::before {
408
+
409
+ content: "";
410
+
411
+ position: absolute;
412
+
413
+ top: 50%;
414
+
415
+ left: 52%;
416
+
417
+ bottom: 0;
418
+
419
+ content: "";
420
+
421
+ vertical-align: middle;
422
+
423
+ width: 8px;
424
+
425
+ height: 13px;
426
+
427
+ transform: translate(-50%, -50%);
428
+
429
+ background: url(../images/slick-next-arrow.svg) 0 0 no-repeat;
430
+
431
+ transition: 0.3s;
432
+
433
+ }
434
+
435
+
436
+
437
+
438
+
439
+
440
+
441
+ .slider2 .slick-prev {
442
+
443
+ position: absolute;
444
+
445
+ right: 100px;
446
+
447
+ bottom: -30px;
448
+
449
+
450
+
451
+ font-size: 0;
452
+
453
+ line-height: 0;
454
+
455
+ width: 3.8rem;
456
+
457
+ height: 3.8rem;
458
+
459
+ border-radius: 50%;
460
+
461
+ display: block;
462
+
463
+ padding: 0;
464
+
465
+ -webkit-transform: translate(0, -50%);
466
+
467
+ -ms-transform: translate(0, -50%);
468
+
469
+ transform: translate(0, -50%);
470
+
471
+ cursor: pointer;
472
+
473
+ color: transparent;
474
+
475
+ border: none;
476
+
477
+ outline: none;
478
+
479
+ background: transparent;
480
+
481
+ border: 1px solid #0088c4;
482
+
483
+ padding-top: 3px;
484
+
485
+ }
486
+
487
+
488
+
489
+ .slider2 .slick-prev::before {
490
+
491
+ content: "";
492
+
493
+ position: absolute;
494
+
495
+ top: 50%;
496
+
497
+ left: 48%;
498
+
499
+ bottom: 0;
500
+
501
+ content: "";
502
+
503
+ vertical-align: middle;
504
+
505
+ width: 8px;
506
+
507
+ height: 13px;
508
+
509
+ transform: translate(-50%, -50%);
510
+
511
+ background: url(../images/slick-prev-arrow.svg) 0 0 no-repeat;
512
+
513
+ transition: 0.3s;
514
+
515
+ }
516
+
517
+
518
+
519
+
520
+
343
521
  ```
344
522
 
345
523
 

1

コードを修正しました。

2019/08/07 09:16

投稿

UKYO9311
UKYO9311

スコア31

test CHANGED
File without changes
test CHANGED
@@ -36,59 +36,59 @@
36
36
 
37
37
  ```html
38
38
 
39
- <ul class="slider2">
40
-
41
- <li>
42
-
43
- <a class="#">
44
-
45
- <img alt="Alt" src="images/top_works-img1.jpg" >
46
-
47
- </a>
48
-
49
- </li>
50
-
51
- <li>
52
-
53
- <a class="#">
54
-
55
- <img alt="Alt" src="images/top_works-img1.jpg" >
56
-
57
- </a>
58
-
59
- </li>
60
-
61
- <li>
62
-
63
- <a class="#">
64
-
65
- <img alt="Alt" src="images/top_works-img1.jpg" >
66
-
67
- </a>
68
-
69
- </li>
70
-
71
- <li>
72
-
73
- <a class="#">
74
-
75
- <img alt="Alt" src="images/top_works-img1.jpg" >
76
-
77
- </a>
78
-
79
- </li>
80
-
81
- <li>
82
-
83
- <a class="#">
84
-
85
- <img alt="Alt" src="images/top_works-img1.jpg" >
86
-
87
- </a>
88
-
89
- </li>
90
-
91
- </ul>
39
+ <div class="slider2">
40
+
41
+ <div>
42
+
43
+ <a class="#">
44
+
45
+ <img alt="Alt" src="images/top_works-img1.jpg" >
46
+
47
+ </a>
48
+
49
+ </div>
50
+
51
+ <div>
52
+
53
+ <a class="#">
54
+
55
+ <img alt="Alt" src="images/top_works-img1.jpg" >
56
+
57
+ </a>
58
+
59
+ </div>
60
+
61
+ <div>
62
+
63
+ <a class="#">
64
+
65
+ <img alt="Alt" src="images/top_works-img1.jpg" >
66
+
67
+ </a>
68
+
69
+ </div>
70
+
71
+ <div>
72
+
73
+ <a class="#">
74
+
75
+ <img alt="Alt" src="images/top_works-img1.jpg" >
76
+
77
+ </a>
78
+
79
+ </div>
80
+
81
+ <div>
82
+
83
+ <a class="#">
84
+
85
+ <img alt="Alt" src="images/top_works-img1.jpg" >
86
+
87
+ </a>
88
+
89
+ </div>
90
+
91
+ </div>
92
92
 
93
93
  ```
94
94
 
@@ -354,9 +354,9 @@
354
354
 
355
355
  centerMode: true,
356
356
 
357
- prevArrow:'<div class=”slick-prev”>PREV</div>',
357
+ prevArrow:'<div class="slick-prev">PREV</div>',
358
-
358
+
359
- nextArrow:'<div class=”slick-next”>NEXT</div>',
359
+ nextArrow:'<div class="slick-next">NEXT</div>',
360
360
 
361
361
  infinite: false,
362
362