回答編集履歴
1
コメントを受けて回答内容を変更
answer
CHANGED
|
@@ -1,26 +1,23 @@
|
|
|
1
|
-
|
|
1
|
+
> 何枚かのスライドが重なっていたり、
|
|
2
2
|
|
|
3
|
+
これは`$slider.on('setPosition', function(){});`の中でやっている横幅調整処理のせいです。
|
|
4
|
+
この処理自体なくしてしまえばスライドは重なりません。
|
|
5
|
+
|
|
6
|
+
> 時々動きがカクカクしたり
|
|
7
|
+
|
|
8
|
+
これは、末尾スライドと先頭スライドの間の移動でアニメーションが実行されていないせいです。
|
|
3
|
-
```
|
|
9
|
+
```css
|
|
4
|
-
<div class="slider-container">
|
|
5
|
-
|
|
10
|
+
.slick-slide {
|
|
6
|
-
<div class="flow-slide">
|
|
7
|
-
<p class="">、、、</p>
|
|
8
|
-
<div class="flow-list">
|
|
9
|
-
<p class="">、、、</p>
|
|
10
|
-
<p class=""><span class="marker">、、、</span></p> <!-- spanの閉じタグ不足 -->
|
|
11
|
-
<p class=""><img src=".png" alt=""></p> <!-- img src属性の"不足 -->
|
|
12
|
-
<p class="">、、、</p> <!-- pの閉じタグ不足 -->
|
|
13
|
-
|
|
11
|
+
transition: .3s ease;
|
|
12
|
+
transform: scale(.85);
|
|
13
|
+
}
|
|
14
|
+
.slick-current {
|
|
14
|
-
|
|
15
|
+
transform: scale(1);
|
|
15
|
-
<div class="flow-slide">
|
|
16
|
-
<p class="">、、、</p>
|
|
17
|
-
<div class="flow-list">
|
|
18
|
-
<p class="">、、、</p>
|
|
19
|
-
<p class=""><span class="marker">、、、</span></p> <!-- spanの閉じタグ不足 -->
|
|
20
|
-
<p class=""><img src=".png" alt=""></p> <!-- img src属性の"不足 -->
|
|
21
|
-
<p class="">、、、</p> <!-- pの閉じタグ不足 -->
|
|
22
|
-
</div>
|
|
23
|
-
|
|
16
|
+
}
|
|
24
|
-
</div>
|
|
25
|
-
<!-- このあとまだ続くんですかね？ -->
|
|
26
|
-
```
|
|
17
|
+
```
|
|
18
|
+
こいつらですね。
|
|
19
|
+
|
|
20
|
+
おそらくslickが付与してくれるclassをあてにしてアニメーションさせるつもりなんだと思いますが、末尾と先頭の切り替わり時のclassの付け外しが、他のスライド移動時とは異なるのでしょう。
|
|
21
|
+
このようなレイアウト系のライブラリを使用するときは、ライブラリが用意している機能で実現できる範囲で動作させる方がいいと思います。
|
|
22
|
+
独自に拡張したいのなら、それこそライブラリ標準の動作との兼ね合いはご自身で徹底的に調査するしかないかと思います。
|
|
23
|
+
私もそこまで調査する気はないです。悪しからず。
|