Slick/全画面でふわっと切り替えスライドショー【jQuery】
Slickスライダーは、jQueryを使用して作成されたレスポンシブ対応のスライダープラグインです。このプラグインを使用すると、Webページにスライダーを簡単に追加することができます。Slickスライダーには多数の設定オプションがあり、自分のウェブサイトの スタイルに合わせてカスタマイズ することができます。また、スライダー内に画像やビデオ、HTMLなど、さまざまなコンテンツを表示することができます。Slickスライダーは、ウェブサイトのホームページ、プロダクトギャラリーやブログ記事など、多くの場面で使用されています。
slickの実装方法
まずは、 jQuery ベースのプラグインなので jQuery の実装します。
外部リンクslickファイル1、jQueryとSlickのスクリプトを読み込む
これによって、ウェブページ内で jQuery と Slick の機能が利用できるようになり。Slick を使ってスライドショーを作成することができます。
2、HTMLマークアップを記述する
3、スライダーを初期化する
$(document).ready(function()< $('.slider').slick(< autoplay: true, autoplaySpeed: 2000, arrows: false, dots: true, centerMode: true, centerPadding: '10%' >); >); ローカルデータslickファイルダウンロードが完了したらzipファイルを解凍。フォルダ「slick-1.8.1」→「slick-1.8.1」→「slick」→ slick.css ・ slick.min.js のファイルが入っています。
その中で必須になるslickファイルは slick.min.js ・ slick.css ・ slick-theme.css
ローカルファイル構成- SlickのWebサイトから最新版をダウンロードして解凍します。
- 解凍したslickディレクトリ内のslick.min.jsとslick.cssを使用したいプロジェクトのディレクトリにコピーします。
- HTMLファイルでjQueryとSlickのスタイルシートとJavaScriptファイルを読み込みます。
フワッと切り替え(background-image版)
【コード一覧】背景画像でふわっと切り替えul で囲み li に対して background-image で画像を配置します。
HTML CSS /* リセットCSS */ body,ul,li < padding: 0; margin: 0;>/* スリックスライダー */ .slider li < width: 100%; height: 100vh; object-fit: cover; >.slider li:first-of-type < background-image: url(https://picsum.photos/1921/1080); >.slider li:nth-of-type(2) < background-image: url(https://picsum.photos/1922/1081); >.slider li:last-of-type < background-image: url(https://picsum.photos/1923/1082); > JS $('.slider').slick(< infinite: true, //スライドのループを有効 arrows: false, //前へ、次への矢印ボタンの有無 fade: true, //スライドの切り替えをフェードに speed: 2000, //アニメーションの切り替えスピード autoplaySpeed: 3000, //自動再生時のスライドの静止時間 autoplay: true, //スライダーの自動再生 pauseOnFocus: false, //フォーカスで一時停止を無効 pauseOnHover: false, //マウスホバーで一時停止を無効 pauseOnDotsHover: false, //ドットナビゲーションをマウスホバーで一時停止を無効 >);画面でふわっと切り替え【コード】
【コード一覧】画面でふわっと切り替えul で囲み li の中に画像を入れます。このコードの img は自動で変わる画像に設定しているので、画像を設定したい場合は、 imgフォルダ を作ってその中に画像を入れて指定しましょう。
HTMLslickオプション一覧
オプション名説明初期値accessibilityキーボードの矢印キーやTabキーで操作設定trueadaptiveHeightスライダーの高さの自動調整falseautoplayスライダーの自動再生falseautoplaySpeed自動再生のスピード（ミリ秒単位）3000arrows前へ、次への矢印ボタンtrueasNavFor他のスライダーのナビゲーションに設定nullappendArrows左右の矢印ボタンの場所を変更$(element)appendDotsドットインジケーターの場所変更$(element)prevArrow矢印ボタンの「前へ」のHTMLをカスタマイズ nextArrow矢印ボタンの「次へ」のHTMLをカスタマイズ centerModeスライダーを中心に表示して部分的に前後のスライドが見えるように設定falsecenterPadding見切れるスライダーの幅。’px’または’％’。’50px’cssEaseCSS3アニメーションイージングを設定‘ease’dotsドットナビゲーションボタンを表示するかどうかfalsedotsClassドットナビゲーションボタンのclass名を指定‘slick-dots’fadeスライダーの切り替えをスライドではなくフェイドインにするかfalsefocusOnSelectクリックでのスライド切り替えを有効にするかfalseeasingjQueryアニメーションイージングを追加‘linear’edgeFrictioninfinite:falseのときに最初と最後のスライドをスワイプした時のフリクション値を設定0.15infiniteスライドの端まできた時にループさせるかどうかtrueinitialSlide最初に表示するスライドを指定0lazyLoad画像の遅延読み込みを設定（’ondemand’か’progressive’）ondemandmobileFirstレスポンシブの設定でモバイルの計算を優先させるfalsepauseOnFocus自動再生時にスライドにフォーカスした際、自動再生をストップさせるかtruepauseOnHover自動再生時にスライドにマウスオーバーした際、自動再生をストップさせるかtruepauseOnDotsHover自動再生時にドットインジケーターにマウスオーバーした際、自動再生をストップさせるかfalserespondToレスポンシブの基準を設定（’window’もしくは’slider’もしくは’min’）windowresponsiveレスポンシブのブレイクポイントを指定nonerowsスライドの行数を設定（slidesPerRowを使用して、各行に含めるスライドの数を設定）1slideスライドとして使用する要素を設定”slidesPerRowrowsオプションで2以上が設定されている際、各行にいくつのスライドを表示するか設定1slidesToShow同時に表示されるスライドの数を設定1slidesToScroll同時にスクロールされるスライドの数を設定1speedアニメーションの切り替えスピード300swipeスワイプでスライドを変更できるかどうかtrueswipeToSlideslidesToScrollの設定に関係なく、ユーザーがスライドを直接ドラッグまたはスワイプした場合は1スライドずつ動かすfalsetouchMoveタッチでスライドさせられるかどうかtruetouchThresholdスワイプでスライドさせる距離を設定（1 / touchThreshold）*スライダの幅5useCSSCSSのtransitionを有効にするかどうかtrueuseTransformCSSのtransformを有効にするかどうかtruevariableWidthスライド毎に横幅が違う場合、スライド幅を可変にするかどうかfalseverticalスライドを縦方向にするかどうかfalseverticalSwiping縦方向のスワイプを有効にするかどうかfalsertlスライダーの方向を右から左に変更するか（right to left）falsewaitForAnimateスライドアニメーション中にスライドを前後させる要求を無視するかtruezIndexスライドの重なり順1000 slickオプション ▪ズーム機能を追加したslickスライダーは下記記事をご確認ください。 【ズーム機能を追加】Slick/全画面でふわっと切り替えスライドショー ズーム機能を追加したSlick/全画面でふわっと切り替えスライドショーをコピペで実装する.クリックでスクロール
両サイドちら見せスライダー
画像リスト_スリック
jQuery不要のスライダー
Swiperの場合はjQuery不要で利用可能です。
外部プラグインもjQueryも使わずに、 高機能スライダー として様々なカスタム可能です。
コメントを残す コメントをキャンセル プログラミング作品集 原神ガチャシュミレーター 鳴潮ガチャシュミレーター よく読まれている記事 【原神】開花・超開花・超激化・原激化・拡散・結晶化など全元素反応まとめ（草元素追加） 【原神】刻晴超開花パーティ 夜蘭蒸発パーティ 深境螺旋12層攻略 Genshin Impact [4K] (げんしん) 【原神】激化「原激化」「超激化」「草激化」の仕組みを解説(げんしん) 【原神】アルハイゼン草激化超激化パーティ 胡桃蒸発パーティ 螺旋 Genshin Impact 4K (げんしん) 【原神】雷電将軍超激化パーティ タルタリヤ蒸発パーティ 深境螺旋12層攻略 Genshin Impact [4K] (げんしん) 【崩壊3rd】サウンドトラック(歌詞付き)「Wiki」 All-in-One WP Migrationアップロードファイルサイズを100MB～10GBに上げる方法【プラグイン】 ハンバーガーメニューでメニュー外をクリックした際も閉じるを実行するナビゲーションの作り方【JavaScript】原神 / 鳴潮 / ゼンゼロ 情報サイト
© 2026 PULL DESIGN All Rights Reserved.