ability_yuma
12/18/2018 - 3:33 AM

slickを使いこなす!(小技もアリ)

参考URL http://ithat.me/2016/10/17/how-to-use-slick-jquery-plugin

スライダーで次の画像をチラ見せさせる方法 https://kata-tip.com/jquery-slick-01/

$('.slider').slick({
  // 矢印キーでスライドを切り替えるか [初期値:true]
  accessibility: true,
  // スライドの高さが違うときに自動調整するか [初期値:false]
  adaptiveHeight: false,
  // 自動再生するか [初期値:false]
  autoplay: true,
  // 自動再生で切り替えする時間(ミリ秒) [初期値:3000]
  autoplaySpeed: 3500,
  // 前次ボタンを表示するか [初期値:true]
  arrows: true,
  // 別のスライドと連携したいときにクラス名を指定 [初期値:null]
  asNavFor: null,
  // 矢印ボタンの生成位置を変更 [初期値:$('.my-slide)]
  appendArrows: $('.my-slide'),
  // ドットナビゲーションの生成位置を変更 [初期値:$('.my-slide)]
  appendDots: $('.my-slide'),
  // 前ボタンの要素を変更 [初期値:'<button type="button" class="slick-prev">Previous</button>']
  prevArrow: '<a class="slick-prev" href="#">前へ</a>',
  // 次ボタンの要素を変更 [初期値:'<button type="button" class="slick-next">Next</button>']
  nextArrow: '<a class="slick-next" href="#">次へ</a>',
  // slidesToShowが奇数のとき、現在のスライドを中央に表示するか [初期値:false]
  centerMode: false,
  // centerMode:trueのとき、左右のスライドをチラ見せさせる幅 [初期値:'50px']
  centerPadding: '60px',
  // ease-in,ease-in-outなどCSSのイージング [初期値:'ease']
  cssEase: 'linear',
  // dots:trueのとき、ドットをサムネイルなどにカスタマイズ [初期値:n/a]
  customPaging: function(slick, index){
    var num = slick.$slides.eq(index).html();
    return '<b>' + num + '</b>';
  },
  // ドットナビゲーションを表示するか [初期値:false]
  dots: false,
  // ドットナビゲーションのクラス名を変更 [初期値:slick-dots]
  dotsClass: 'my-dots',
  // マウスドラッグでスライドの切り替えをするか [初期値:true]
  draggable: true,
  // スライド切り替えをフェードするか [初期値:false]
  fade: false,
  // クリックでメインのスライドを切り替えるか
  focusOnSelect: true,
  // jQueryのイージング [初期値:'linear']
  easing: 'linear',
  // スライドをループさせるか [初期値:true]
  infinite: false,
  // infinite:falseのとき、両端のスライドをドラッグしようとした際のバウンドスクロール値 [初期値:0.15]
  edgeFriction: 0.2,
  // 開始スライド(0から始まるので注意) [初期値:0]
  initialSlide: 2,
  // 画像の遅延表示タイプ(ondemand/progressive) [初期値:'ondemand']
  lazyLoad: 'ondemand',
  // モバイルファーストにするか [初期値:false]
  mobileFirst: false,
  // autoplay:trueのとき、マウスフォーカスしたら一時停止させるか [初期値:true]
  pauseOnFocus: true,
  // autoplay:trueのとき、マウスホバーしたら一時停止させるか [初期値:true]
  pauseOnHover: true,
  // autoplay:trueのとき、ドットナビゲーションをマウスホバーしたら一時停止させるか [初期値:false]
  pauseOnDotsHover: false,
  // レスポンシブ設定の基準(window/slider/min) [初期値:'window']
  respondTo: 'window',
  // レスポンシブ設定
  responsive: [
    {
      breakpoint: 1024,     // 600〜1023px
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,      // 480〜599px
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,      // 〜479px
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ],
  // 行数 [初期値:1]
  rows: 1,
  // スライド部分の要素のタグ名 [初期値:'']
  slide: 'div',
  // rowsの値が2以上のとき、1行あたりに表示させるスライド数 [初期値:1]
  slidesPerRow: 2,
  // 表示させるスライド数 [初期値:1]
  slidesToShow: 2,
  // 一度に移動させるスライド数 [初期値:1]
  slidesToScroll: 2,
  // スライド/フェードさせるスピード(ミリ秒) [初期値:300]
  speed: 400,
  // スワイプを検知するか [初期値:true]
  swipe: true,
  // slidesToScrollの値に関係なく、マウスドラッグやスワイプでスライドさせる際は1スライドずつ動かす [初期値:false]
  swipeToSlide: false,
  // タッチでスライドさせるか [初期値:true]
  touchMove: true,
  // (1/touchThreshold)*スライダーの横幅 分マウスドラッグするとスライドされる [初期値:5]
  touchThreshold: 5,
  // CSSのtransitionを使用するか [初期値:true]
  useCSS: true,
  // CSSのtransformを使用するか [初期値:true]
  useTransform: true,
  // 横幅がバラバラなスライドにするか [初期値:false]
  variableWidth: false,
  // 縦方向にスライドさせるか [初期値:false]
  vertical: true,
  // 縦方向のスワイプを有効にするか [初期値:false]
  verticalSwiping: false,
  // スライドの順番を逆にするか [初期値:false]
  rtl: false,
  // スライドアニメーション中サムネイルをクリックしたとき反応させないか [初期値:true]
  waitForAnimate: true,
  // z-index値 [初期値:1000]
  zIndex: 1000
});
var $slider = $('.slider');
$slider.slick();

$slider.on('afterChange', function(slick, currentSlide){
  console.log('スライド切り替え後のイベント');
});
$slider.on('beforeChange', function(slick, currentSlide, nextSlide){
  console.log('スライド切り替え前のイベント');
});
$slider.on('breakpoint', function(event, slick, breakpoint){
  console.log('ブレイクポイント時のイベント');
});
$slider.on('destroy', function(event, slick){
  console.log('スライダーを解除(unslick)した時のイベント');
});
$slider.on('edge', function(slick, direction){
  console.log('infinite:falseのとき両端のスライドをドラッグした時のイベント');
});
$slider.on('init', function(slick){
  console.log('スライダーが初期化された時のイベント');
});
$slider.on('reInit', function(slick){
  console.log('スライダーが再初期化された時のイベント');
});
$slider.on('setPosition', function(slick){
  console.log('スライダのポジションまたは横幅が設定された時のイベント');
});
$slider.on('swipe', function(slick, direction){
  console.log('マウスドラッグまたはスワイプされた時のイベント');
});
$slider.on('lazyLoaded', function(event, slick, image, imageSource){
  console.log('画像がlazyLoadされる度に呼ばれるイベント');
});
$slider.on('lazyLoadError', function(event, slick, image, imageSource){
  console.log('画像がlazyLoadされなかったときに呼ばれるイベント');
});
var $slider = $('.slider');
$slider.slick();

// スライド切り替えの度にスライド番号を取得
$slider.on('afterChange', function(slick, currentSlide){
  var current_slide = $my_slide.slick('slickCurrentSlide');
  console.log(current_slide);
});
// 指定のスライドへ移動
$slider.slick('slickGoTo', 3);
// 次のスライドへ移動
$slider.slick('slickNext');
// 前のスライドへ移動
$slider.slick('slickPrev');
// スライドの自動再生を停止
$slider.slick('slickPause');
// スライドの自動再生を開始
$slider.slick('slickPlay');
// 末尾にスライドを追加
$slider.slick('slickAdd', '<div>Add Slide</div>');
// 2番目(0から数えて)の位置にスライドを追加
$slider.slick('slickAdd', '<div>Add Slide</div>', 1);
// 1番目(0から数えて)の位置にスライドを追加
$slider.slick('slickAdd', '<div>Add Slide</div>', 1, 'addBefore');
// 3番目(0から数えて)のスライドを削除
$slider.slick('slickRemove', 2);
// 1番目(0から数えて)のスライドを削除
$slider.slick('slickRemove', 2, true);
// 2番目(0から数えて)のスライドを削除
$slider.slick('slickRemove', 2, false);
// jQueryの.filterと同じ機能
$slider.slick('slickFilter', function(index){
  if (index < 2){
    return $(this).eq(index);  // スライド番号が2より小さいものだけ表示
  }
});
// フィルターを解除
$slider.slick('slickUnfilter');
// スライダーのオプションを取得
var get_slick_option = $slider.slick('slickGetOption', 'infinite');
console.log(get_slick_option);
// スライダーのオプションを変更(第4引数をtrueにするとリアルタイムに反映)
$slider.slick('slickSetOption', 'infinite', false, true);
// スライダーを解除
$slider.slick('unslick');
// スライダーオブジェクトを取得
var slick_obj = $slider.slick('getSlick');
console.log(slick_obj);
//ロード中は非表示に(すべてのスライダー画像が一瞬縦積みになることを防ぐ)

.slider { //親要素
  display:none;
  &.slick-initialized {
    display: block;
  }
}

.slider { //親要素
    .slick-slide { //小要素
        &:nth-child(n + 2) {
            display:none;
        }
    }
    &.slick-initialized {
        .slick-slide {
            &:nth-child(n + 2) {
                display: block;
            }
        }
      }
  }
$(function(){
  $('.slider').slick({
    autoplay:true,
    arrows: false,
    slidesToShow: 1
  });
});

.slider {
  width: 768px;
  margin: 30px auto 0;
}
.slider .slick-list {
  padding: 0 30% 0 0;
}
.slider li {
  margin: 0 40px;
}

特に難しい記述はしていません。基本的なslickの記述をして.slick-listに右方向へpaddingを指定すると片方だけスライド画像をチラ見せできます。
 <!--読み込み遅延-->
 <img data-lazy="../img/1.jpg">