質問編集履歴
1
説明不足があった
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -17,11 +17,12 @@
|
|
|
17
17
|
width:100%;
|
|
18
18
|
}
|
|
19
19
|
#wholes{
|
|
20
|
-
|
|
20
|
+
width:400px;
|
|
21
21
|
height:400px;
|
|
22
22
|
border-radius:50%;
|
|
23
23
|
border:1px solid #fff;
|
|
24
24
|
margin:60px auto 0 auto;
|
|
25
|
+
overflow:hidden;
|
|
25
26
|
}
|
|
26
27
|
#timeimg{
|
|
27
28
|
width:500px;
|
|
@@ -42,5 +43,7 @@
|
|
|
42
43
|
https://cafe-steen.com/ ←こちらのサイトのトップページ上部にある1日の流れを写真で説明してあるslickで作られたスライドを作成したいです。
|
|
43
44
|
slick自体の書き方はわかるのですが、画像がスライド後に左にゆっくり移動しながら表示されている部分のコードの書き方がわからず困っております。
|
|
44
45
|
なので表示中の画像を固定ではなく左に移動しながら表示させたいです。
|
|
46
|
+
|
|
47
|
+
自分の考えとしては親要素である#wholesを400pxの正円にし、子要素の画像はwidth:500px;height:435pxで親要素より大きくして画像が移動しても見切れないようにしたいと考えました。親要素#wholesにはoverflowをかけたのではみ出た部分は非表示にしてあります。
|
|
45
48
|
【試したこと】
|
|
46
49
|
表示画像には.slick-activeが付与されるのでそこを上手く使えればと思い、.slick-activeにmarginやanimationをつけてみましたが画像が重なったり、順番がおかしくなったりしたのでだめでした。
|