質問編集履歴

2

css内に不要な箇所があったので削除しました

2020/03/31 01:58

投稿

motoo888
motoo888

スコア65

test CHANGED
File without changes
test CHANGED
@@ -76,21 +76,11 @@
76
76
 
77
77
  border: dashed 1px;
78
78
 
79
- z-index: 10;
80
-
81
79
 
82
80
 
83
81
  ul {
84
82
 
85
- display: none;
86
-
87
- opacity: 0;
88
-
89
- transition: opacity .3s linear;
90
-
91
83
  width: 100%;
92
-
93
- z-index: 10;
94
84
 
95
85
 
96
86
 
@@ -101,8 +91,6 @@
101
91
  width: auto;
102
92
 
103
93
  height: 600px;
104
-
105
- z-index: 1;
106
94
 
107
95
  }
108
96
 

1

参考画像を追加しました。

2020/03/31 01:58

投稿

motoo888
motoo888

スコア65

test CHANGED
@@ -1 +1 @@
1
- slickを使って画像を中央表示にしたい
1
+ slick.jsプラグインで画像を中央表示にしたい
test CHANGED
@@ -2,9 +2,9 @@
2
2
 
3
3
 
4
4
 
5
- トのTOPにslickを使いTOP画像が一定時間で変わるようにしています
5
+ jqueryプラグン「slick.js」を使いTOP画像が一定時間で変わるようにしてい
6
6
 
7
- SPビューにすると画像が中央表示できず、左上の部分の画像になり変に見切れてしまうので
7
+ 画像が中央表示できず、左上固定になてしまう
8
8
 
9
9
  画像を中央表示したい。
10
10
 
@@ -14,9 +14,15 @@
14
14
 
15
15
 
16
16
 
17
- PCビュー、SPビュー時の両方で画像を中央表示にしたいが、
17
+ 画像を中央表示にしたいが、
18
18
 
19
- 左上固定になってしまう
19
+ 左上固定になってしまう
20
+
21
+
22
+
23
+ [参考画像]
24
+
25
+ ![イメージ説明](b5d5a1cf2582b25d45b45c269da95ddc.png)
20
26
 
21
27
 
22
28
 
@@ -52,35 +58,7 @@
52
58
 
53
59
  ```
54
60
 
55
- .slick {
56
-
57
- display: none;
58
-
59
- opacity: 0;
60
-
61
- transition: opacity .3s linear;
62
-
63
- width: 100%;
64
-
65
- z-index: 10;
66
-
67
- li{
68
-
69
- object-fit: cover;
70
-
71
- width: auto;
72
-
73
- height: 600px;
74
-
75
- z-index: 1;
76
-
77
- }
78
-
79
- }
80
-
81
-
82
-
83
- .slick.slick-initialized {
61
+ .slick.slick-initialized {
84
62
 
85
63
  display: block;
86
64
 
@@ -89,8 +67,6 @@
89
67
  }
90
68
 
91
69
 
92
-
93
-
94
70
 
95
71
  .eyecatch {
96
72
 
@@ -101,6 +77,36 @@
101
77
  border: dashed 1px;
102
78
 
103
79
  z-index: 10;
80
+
81
+
82
+
83
+ ul {
84
+
85
+ display: none;
86
+
87
+ opacity: 0;
88
+
89
+ transition: opacity .3s linear;
90
+
91
+ width: 100%;
92
+
93
+ z-index: 10;
94
+
95
+
96
+
97
+ li{
98
+
99
+ object-fit: cover;
100
+
101
+ width: auto;
102
+
103
+ height: 600px;
104
+
105
+ z-index: 1;
106
+
107
+ }
108
+
109
+ }
104
110
 
105
111
  }
106
112