回答編集履歴

1

コメントを受けて回答内容を変更

2018/08/29 09:54

投稿

spookybird
spookybird

スコア1803

test CHANGED
@@ -1,51 +1,45 @@
1
- これが原因どうかはわかりませんが、HTML構造おかしいところがあるので見直しみてくださ
1
+ > 何枚かのスライド重なっていたり、
2
2
 
3
3
 
4
4
 
5
- ```html
5
+ これは`$slider.on('setPosition', function(){});`の中でやっている横幅調整処理のせいです。
6
6
 
7
- <div class="slider-container">
7
+ この処理自体なくしてしまえばスライドは重なりません。
8
8
 
9
- <div class="slider">
10
9
 
11
- <div class="flow-slide">
12
10
 
13
- <p class="">、、、</p>
11
+ > 時々動きがカクカクしたり
14
12
 
15
- <div class="flow-list">
16
13
 
17
- <p class="">、、、</p>
18
14
 
19
- <p class=""><span class="marker">、、</span></p> <!-- span閉じタグ不足 -->
15
+ これは末尾スライドと先頭スライド間の移動でアニメーションが実行されていないせいです。
20
16
 
21
- <p class=""><img src=".png" alt=""></p> <!-- img src属性の"不足 -->
17
+ ```css
22
18
 
23
- <p class="">、、、</p> <!-- pの閉じタグ不足 -->
19
+ .slick-slide {
24
20
 
25
- </div>
21
+ transition: .3s ease;
26
22
 
27
- </div>
23
+ transform: scale(.85);
28
24
 
29
- <div class="flow-slide">
25
+ }
30
26
 
31
- <p class="">、、、</p>
27
+ .slick-current {
32
28
 
33
- <div class="flow-list">
29
+ transform: scale(1);
34
30
 
35
- <p class="">、、、</p>
36
-
37
- <p class=""><span class="marker">、、、</span></p> <!-- spanの閉じタグ不足 -->
38
-
39
- <p class=""><img src=".png" alt=""></p> <!-- img src属性の"不足 -->
40
-
41
- <p class="">、、、</p> <!-- pの閉じタグ不足 -->
42
-
43
- </div>
44
-
45
- 、、、
31
+ }
46
-
47
- </div>
48
-
49
- <!-- このあとまだ続くんですかね? -->
50
32
 
51
33
  ```
34
+
35
+ こいつらですね。
36
+
37
+
38
+
39
+ おそらくslickが付与してくれるclassをあてにしてアニメーションさせるつもりなんだと思いますが、末尾と先頭の切り替わり時のclassの付け外しが、他のスライド移動時とは異なるのでしょう。
40
+
41
+ このようなレイアウト系のライブラリを使用するときは、ライブラリが用意している機能で実現できる範囲で動作させる方がいいと思います。
42
+
43
+ 独自に拡張したいのなら、それこそライブラリ標準の動作との兼ね合いはご自身で徹底的に調査するしかないかと思います。
44
+
45
+ 私もそこまで調査する気はないです。悪しからず。