参考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">