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スライダーの動作を試してみてください。これらのオプションを調整することで、さまざまな動作やスタイルをテストできます。