質問編集履歴
1
説明不足があった
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
|
|
37
37
|
#wholes{
|
|
38
38
|
|
|
39
|
-
|
|
39
|
+
width:400px;
|
|
40
40
|
|
|
41
41
|
height:400px;
|
|
42
42
|
|
|
@@ -45,6 +45,8 @@
|
|
|
45
45
|
border:1px solid #fff;
|
|
46
46
|
|
|
47
47
|
margin:60px auto 0 auto;
|
|
48
|
+
|
|
49
|
+
overflow:hidden;
|
|
48
50
|
|
|
49
51
|
}
|
|
50
52
|
|
|
@@ -86,6 +88,10 @@
|
|
|
86
88
|
|
|
87
89
|
なので表示中の画像を固定ではなく左に移動しながら表示させたいです。
|
|
88
90
|
|
|
91
|
+
|
|
92
|
+
|
|
93
|
+
自分の考えとしては親要素である#wholesを400pxの正円にし、子要素の画像はwidth:500px;height:435pxで親要素より大きくして画像が移動しても見切れないようにしたいと考えました。親要素#wholesにはoverflowをかけたのではみ出た部分は非表示にしてあります。
|
|
94
|
+
|
|
89
95
|
【試したこと】
|
|
90
96
|
|
|
91
97
|
表示画像には.slick-activeが付与されるのでそこを上手く使えればと思い、.slick-activeにmarginやanimationをつけてみましたが画像が重なったり、順番がおかしくなったりしたのでだめでした。
|