slickスライダーオプション一覧

Slickスライダーには多くのオプションがあります。以下は、Slickスライダーの全てのオプションを詰め込んだ例です。これを使うことで、どのように設定が機能するかを試すことができます。

$(function() {
    $(".slick").slick({
        autoplay: true, // 自動再生
        autoplaySpeed: 2000, // 再生速度(ミリ秒設定) 1000ミリ秒=1秒
        infinite: true, // 無限スライド
        arrows: true, // 左右の矢印表示
        dots: true, // ドットナビゲーション表示
        speed: 300, // スライドのスピード
        slidesToShow: 1, // 表示するスライドの数
        slidesToScroll: 1, // スクロールするスライドの数
        fade: false, // フェード効果
        cssEase: 'linear', // CSSのアニメーション効果
        adaptiveHeight: false, // スライダーの高さを自動調整
        variableWidth: false, // スライドの幅を可変に
        responsive: [
            {
                breakpoint: 1024, // 画面幅1024px以下の場合
                settings: {
                    slidesToShow: 3,
                    slidesToScroll: 3,
                    infinite: true,
                    dots: true
                }
            },
            {
                breakpoint: 600, // 画面幅600px以下の場合
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 2
                }
            },
            {
                breakpoint: 480, // 画面幅480px以下の場合
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }
        ],
        centerMode: false, // センターモード
        centerPadding: '50px', // センターモード時のパディング
        focusOnSelect: false, // スライドクリックでそのスライドを選択
        asNavFor: null, // ナビゲーション用のスライダーを設定
        prevArrow: '<button type="button" class="slick-prev">Previous</button>', // 前の矢印
        nextArrow: '<button type="button" class="slick-next">Next</button>', // 次の矢印
        mobileFirst: false, // モバイルファースト
        rows: 1, // 行の数
        slidesPerRow: 1, // 行ごとのスライド数
        vertical: false, // 垂直スライド
        verticalSwiping: false, // 垂直スワイプ
        rtl: false, // 右から左にスライド
        lazyLoad: 'ondemand', // 遅延読み込み
        swipe: true, // スワイプを有効化
        swipeToSlide: true, // スライドをスワイプで移動
        touchMove: true, // タッチムーブ
        draggable: true, // ドラッグを有効化
        accessibility: true, // アクセシビリティ
        edgeFriction: 0.15, // エッジの摩擦
        pauseOnHover: true, // ホバー時に自動再生を一時停止
        pauseOnFocus: true, // フォーカス時に自動再生を一時停止
        pauseOnDotsHover: true, // ドットホバー時に自動再生を一時停止
        zIndex: 1000, // スライダーのZインデックス
        waitForAnimate: true, // アニメーションを待つ
        easing: 'linear', // イージング
        edgeFriction: 0.15 // エッジの摩擦
    });
});

説明

  • autoplay: スライダーが自動的にスライドを進めるかどうか。
  • autoplaySpeed: 自動再生のスライド速度(ミリ秒単位)。
  • infinite: スライダーが無限にループするかどうか。
  • arrows: 左右の矢印を表示するかどうか。
  • dots: ドットナビゲーションを表示するかどうか。
  • speed: スライドのアニメーション速度(ミリ秒単位)。
  • slidesToShow: 表示するスライドの数。
  • slidesToScroll: スクロールするスライドの数。
  • fade: フェード効果を有効にするかどうか。
  • cssEase: CSSアニメーションのイージング。
  • adaptiveHeight: スライダーの高さを自動調整するかどうか。
  • variableWidth: スライドの幅を可変にするかどうか。
  • responsive: レスポンシブ設定。
  • centerMode: センターモードを有効にするかどうか。
  • centerPadding: センターモード時のパディング。
  • focusOnSelect: スライドをクリックして選択するかどうか。
  • asNavFor: ナビゲーション用のスライダーを設定。
  • prevArrow: 前の矢印のカスタムHTML。
  • nextArrow: 次の矢印のカスタムHTML。
  • mobileFirst: モバイルファーストデザインを有効にするかどうか。
  • rows: スライダーの行数。
  • slidesPerRow: 行ごとのスライド数。
  • vertical: 垂直スライドを有効にするかどうか。
  • verticalSwiping: 垂直スワイプを有効にするかどうか。
  • rtl: 右から左にスライドするかどうか。
  • lazyLoad: 遅延読み込みの設定。
  • swipe: スワイプを有効にするかどうか。
  • swipeToSlide: スワイプでスライドを移動するかどうか。
  • touchMove: タッチムーブを有効にするかどうか。
  • draggable: ドラッグを有効にするかどうか。
  • accessibility: アクセシビリティを有効にするかどうか。
  • edgeFriction: エッジの摩擦。
  • pauseOnHover: ホバー時に自動再生を一時停止するかどうか。
  • pauseOnFocus: フォーカス時に自動再生を一時停止するかどうか。
  • pauseOnDotsHover: ドットホバー時に自動再生を一時停止するかどうか。
  • zIndex: スライダーのZインデックス。
  • waitForAnimate: アニメーションを待つかどうか。
  • easing: イージング設定。

このコードを使って、Slickスライダーの動作を試してみてください。これらのオプションを調整することで、さまざまな動作やスタイルをテストできます。