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

質問編集履歴

1

修正後のコードに上書き

2020/01/01 11:56

投稿

yujill
yujill

スコア12

title CHANGED
File without changes
body CHANGED
@@ -25,8 +25,8 @@
25
25
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
26
26
 
27
27
  <!-- slick -->
28
- <!-- <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1/slick/slick.min.js"></script> -->
28
+ <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
29
-
29
+
30
30
  <title></title>
31
31
  </head>
32
32
 
@@ -34,14 +34,14 @@
34
34
 
35
35
  <body>
36
36
 
37
- <div class="slider">
37
+
38
- <ul class="mt-4 list-unstyled">
38
+ <ul class="slider mt-4 list-unstyled">
39
- <li><img class="image active w-100"src="logo-white.jpeg"></li>
39
+ <li><img src="logo-white.jpeg"></li>
40
- <li><img class="image w-100" src="image200.jpeg"></li>
40
+ <li><img src="image200.jpeg"></li>
41
- <li><img class="image w-100" src="image300.jpeg"></li>
41
+ <li><img src="image300.jpeg"></li>
42
- <li><img class="image w-100" src="image400.jpeg"></li>
42
+ <li><img src="image400.jpeg"></li>
43
43
  </ul>
44
- </div>
44
+
45
45
 
46
46
  <!-- slick -->
47
47
  <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1/slick/slick.min.js"></script>
@@ -50,8 +50,24 @@
50
50
 
51
51
  ---------------------------------------------------------------------
52
52
 
53
- $(function(){
53
+ $(function(){
54
- $('.slider').slick();
54
+ $('.slider').slick();
55
- });
55
+ });
56
56
 
57
+ ---------------------------------------------------------------------
58
+
59
+ .slider{
60
+ margin: 100px auto;
61
+ width: 80%;
62
+ }
63
+ .slider img{
64
+ height: 300px;
65
+ width: 100%;
66
+ }
67
+
68
+ .slick-prev:before,
69
+ .slick-next:before {
70
+ color: #000;
71
+ }
72
+
57
73
  ```