### 前提・実現したいこと jQueryのプラグイン「slick」を使い、下のようなスライダーを実装させたいと思っています。 ![イメージ説明](b866b09ccc4ee44146f9d131f96e20bc.png) ### 発生している問題・エラーメッセージ表示はされていて、動くことは動くのですが、 ①スクロールがカクカクしており、スムーズではありません ②一枚ごとにスクロールされるのではなくカード全体で動いてしまいます。　例）li タグを３つ作ったら３つくっついて動いてしまう。 ③最後のカードの表示が終わったらカードが表示がされなくて（画面からカードが消える）何回かスクロールしたらまた出てくるデバックを確認しましたが、エラーは出ていませんでした。 ### 該当のソースコード（すみません長くなってしまいます。） ```HTML

テキスト

テキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

``` ```CSS .graduateSec__items { margin: 24px 0 186px 128px; } .graduateSec__item { box-shadow: 0 0 20px rgb(0, 175, 168, 10%); height: 394px; margin: 20px 20px 20px 0; max-width: 315px; padding: 12px; width: 100%; } .graduateSec__item__imgWrapper { border-bottom: 1px solid #EFEFEF; } .graduateSec__item__img img { max-width: 291px; width: 100%; } .graduateSec__item__details { padding: 14px 0; } .graduateSec__item__school { font-size: 12px; padding: 0 8px 3px; } .graduateSec__item__name { font-size: 16px; padding: 0 8px; } .graduateSec__item__text { font-size: 16px; line-height: 1.6; padding: 12px 8px 6px; } .graduateSec__button { display: block; border: 1.5px solid #01B6DB; border-radius: 9999px; margin: 0 0 0 auto; padding: 6px 9px; } .graduateSec__button i { color: #01B6DB; display: inline-block; font-size: 15px; height: 5px; padding: 2px 12px 0 0; width: 5px; } ``` ```jQuery // graduateSecスライダー $('.js__graduateSecSlider').slick({ autoplay: true, autoplaySpeed: 2000, infinite: true, dots: false, }); ``` ### 試したこと liタグに親タグとしてdivタグなども書いてみましたが、なおりませんでした。今日一日中調べたのですが、答えが見つけられませんでした。何かヒントを頂けましたら、幸いです。宜しくお願いいたします。 ### 補足情報（FW/ツールのバージョンなど） slickは一番新しいバージョンを使用しています！

	@@ -1 +1 @@
1	- slick　最後の~~余白を消した~~い
1	+ slickの表示が上手くいかず困っています

質問編集履歴