2021年2月11日
【jQuery】slickの「Center Mode」で中央を大きくする等した際に、2周目にがたつく場合の対応方法
よく使用させていただいているスライダープラグイン「Slick」。
「Center Mode」で中央部分を大きくする、中央以外を透過する等した場合、2周目にがたつく場合の対応方法をメモメモ。
const $slider = $("#js-slider"); // 左右の透過の2周目ががたつく対応 $slider.on("beforeChange", (event, slick, currentSlide, nextSlide) => { $slider.find(".slick-slide").each((index, el) => { const $this = $(el), slickindex = $this.attr("data-slick-index"); if (nextSlide == slick.slideCount - 1 && currentSlide == 0) { // 現在のスライドが最初のスライドでそこから最後のスライドに戻る場合 if (slickindex == "-1") { // 最後のスライドに対してクラスを付与 $this.addClass("is-active-next"); } else { // それ以外は削除 $this.removeClass("is-active-next"); } } else if (nextSlide == 0) { // 次のスライドが最初のスライドの場合 if (slickindex == slick.slideCount) { // 最初のスライドに対してクラスを付与 $this.addClass("is-active-next"); } else { // それ以外は削除 $this.removeClass("is-active-next"); } } else { // それ以外は削除 $this.removeClass("is-active-next"); } }); }); // スライダー $slider.slick({ centerMode: true });
関連記事
-
【JS】jQueryでブラウザの画面サイズで処理を判定する方法
【JS】jQueryでブラウザの画面サイズで処理を判定する方法
レスポンシブサイト等で、スマホのときには特定の処理をして、PCの場合は処理をしたくない場合がありますよね。 例えば、スマ・・・ -
【CSS】Flexboxを使って要素を上下左右中央に配置する方法
【CSS】Flexboxを使って要素を上下左右中央に配置する方法
要素を左右だけではなく、上下左右中央に配置する方法は色々あるみたいですが、Flexboxを使って配置する方法をメモメモ。・・・ -
【WordPress】グローバルクエリからカテゴリを取得。category.phpサンプル。
【WordPress】グローバルクエリからカテゴリを取得。category.phpサンプル。
グローバルクエリからカテゴリ(カテゴリ名・スラッグなど)を取得し、サブループでカテゴリの一覧ページを作成する方法のメモメ・・・ -
【XAMPP】任意のディレクトリをバーチャルホストにする方法
【XAMPP】任意のディレクトリをバーチャルホストにする方法
Cドライブ直下にXAMPPをインストールした場合は、 C:xampphtdocs にデータを保存するとPHP等の確認はで・・・ -
【CSS】CSSでよく使うメモ
【CSS】CSSでよく使うメモ
よく使うんだけど、覚えられないCSSをメモメモ。 ▼FontAwesomeでアイコンを表示 [css] :before ・・・ -
【WordPressプラグイン】「MW WP Form」でチェックを入れたら入力ができるようになる項目を作成する方法
【WordPressプラグイン】「MW WP Form」でチェックを入れたら入力ができるようになる項目を作成する方法
簡単にフォームが作成でき、確認・完了画面や入力エラーメッセージのカスタマイズ、ファイルの送信機能などなど、いつも大変お世・・・