Slick.jsを利用する際に使うJS

slickjs-js

// $(function() { 静的サイトで利用するならこちら
jQuery(function($){ // WordPressで利用するならこちら
  $('#target').slick({
    
    accessibility: true, // キーボードでの操作を可能にするかどうか
    adaptiveHeight: false, // スライダーの高さを.slick-currentに合わせるかどうか
    autoplay: false, // スライダーの自動再生
    autoplaySpeed: 3000, // 自動再生時のスライド静止時間
    arrows: true, // 「前へ」と「次へ」の矢印ボタンの有無
    
    // asNavFor: null, // 他のスライダーとの連動 / ページナビゲーションをサムネイルにするときなど
    // https://www.webopixel.net/javascript/1141.html
    // https://blanks.site/post/post37.html
    
    // appendArrows: $('#element'), // 矢印を置き換える
    // https://qiita.com/triamquium/items/eace7179d3c54c079b0f#%EF%BC%91%E7%9F%A2%E5%8D%B0%E7%94%BB%E5%83%8F%E3%82%92html%E3%81%AB%E8%A8%98%E8%BF%B0
    
    // appendDots: $('#element'), // ドットを置き換える
    // https://nxpg.net/blog/?p=8869
    
    // prevArrow: '<button type="button" class="slick-prev">Previous</button>', // 「前へ」のHTMLをカスタマイズ
    // nextArrow: '<button type=”button” class=”slick-next”>Next</button>', // 「次へ」のHTMLをカスタマイズ
    
    centerMode: false, // .slide-currentのスライドを中央に配置し前後のスライドを見切れた状態にする
    centerPadding: '50px', // centerModeがtrueのときに前後の見切れたスライドの表示幅
    cssEase: 'ease', // ease,linear,ease-in,ease-out,ease-in-out  // CSS3のイージングを指定
    
    // customPaging: function, // functionを使ってドットナビゲーションをカスタマイズする
    // https://qiita.com/MikaShirahama/items/c0443cf967865e976208
    
    dots: false, // ドットナビゲーションを表示するかどうか
    dotsClass: 'slick-dots', // ドットナビゲーションのclassを指定
    fade: false, // スライドの切り替えをフェードにするかどうか
    focusOnSelect: false, // クリックしたスライドに切り替えられるようにするかどうか
    easing: 'linear', // jQueryのイージングを指定
    edgeFriction: 0.15, // infinite: false時、両橋のスライドをスワイプしたときのバウンドする幅
    infinite: true, // スライドを無限ループさせるかどうか
    initialSlide: 0, // 最初に表示するスライドを指定
    lazyLoad: 'ondemand', // or progressive // 遅延設定
    mobileFirst: false, // レスポンシブ設定でモバイファーストにするかどうか
    pauseOnFocus: true, // autoplay: true時、スライドをフォーカスしたら一時停止するかどうか
    pauseOnHover: true, // autoplay: true時、スライドをホバーしたら一時停止するかどうか
    pauseOnDotsHover: true, // autoplay: true時、ドットナビゲーションにホバーさせたら一時停止するかどうか
    respondTo: 'window', // 'slider' or 'min' // レスポンシブの基準を設定
    
    // responsive: none, // レスポンシブのブレイクポイントを指定
    // ↓sample below↓
    // responsive: [
    //   {
    //     breakpoint: 768,
    //       settings: {
    //         slidesToShow: 3,
    //         slidesToScroll: 3,
    //       }
    //     },
    //   {
    //     breakpoint: 480,
    //       settings: {
    //         slidesToShow: 2,
    //         slidesToScroll: 2,
    //       }
    //   }
    // ],
    
    rows: 1, // slidePerRowと併用して各行に含めるスライドの枚数を設定
    // slide: '', // スライドのエレメントタグを指定
    slidesPerRow: 1, // 各行のスライドの数を指定
    slidesToShow: 1, // 同時にヒュジさせるスライドの数を指定
    slidesToScroll: 1, // 同時にスクロールされるスライドの数を指定
    speed: 300, // アニメーション切り替えスピード
    swipe: true, // スワイプ可能かどうか
    swipeToSlide: false, // スライドをドラッグまたはスワイプできるかどうか
    touchMove: true, // タッチでスライドさせられるかどうか
    touchThreshold: 5, // スワイプしてスライドが切り替わる移動距離指定 // [1/touchThreshold value]
    useCSS: true, // CSS Transitionを有効にするかどうか
    useTransform: true, // CSS Transformを有効にするかどうか
    variableWidth: false, // スライドの幅が一定でない場合、可変するかどうか
    vertical: false, // スライドを縦方向にするかどうか
    verticalSwiping: false, // 縦方向のスワイプを有効にするかどうか
    rtl: false, // スライドの順番を逆にするかどうか
    waitForAnimate: true,
    zIndex: 1000, // Z-index値を設定
    
  });
});