目次
プログラミングにおいて、他のコードの引数として渡されるサブルーチンである。これにより、低レベルの抽象化層が高レベルの層で定義されたサブルーチン(または関数)を呼び出せるようになる。
Wikipedia
<div class="your-class"> <div>your content</div> <div>your content</div> <div>your content</div> </div>
<div class="slick animation1"> <div><img src="img/img1.jpg" class="slick-image" alt=""></div> <div><img src="img/img2.jpg" class="slick-image" alt=""> </div> <div><img src="img/img3.jpg" class="slick-image" alt=""></div> </div>
<link rel="stylesheet" type="text/css" href="slick.css" /> <link rel="stylesheet" type="text/css" href="slick-theme.css" /> <!-- ~中略~ --> <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script type="text/javascript" src="slick.min.js"></script>
//分割数。奇数にするとバランスがよい。 var x = 7; var y = 5; var $slick = $('.slick'); var initSlick = function (slick, x, y) { $(slick.$slider).find('.slick-slide').each(function (key, value) { $(value).append('<div class="slick-boxWrapper" />'); var img = $(value).find('.slick-image').attr('src'); var slickBox = ''; for (let i = 0; i < x * y; i++) { slickBox += '<div class="slick-box" style="background-image: url(' + img + '); width: ' + 100 / x + '%; height: ' + 100 / y + '%" />'; } $(value).find('.slick-boxWrapper').append(slickBox); }) }
var setBg = function (slick) { $(slick.target).find('.slick-slide').each(function (key, value) { var w = $(value).width(); var h = $(value).height(); var imgW = $(value).find('.slick-image').get(0).naturalWidth; var imgH = $(value).find('.slick-image').get(0).naturalHeight; var setW, setH, fixW, fixH; if (imgW > imgH) { //横長の画像のとき setH = h; setW = imgW * (h / imgH) } else { //縦長の画像のとき setW = w; setH = imgH * (w / imgW); } //ずらす fixW = (setW - w) / 2; fixH = (setH - h) / 2; $(value).find('.slick-box').css({ backgroundSize: setW + 'px ' + setH + 'px' }).each(function (key2, value2) { var positionX = key2 % x / x; var positionY = Math.floor(key2 / x) / y; $(value2).css({ backgroundPosition: ((-1 * positionX * w) - fixW) + 'px ' + ((-1 * positionY * h) - fixH) + 'px' }); }); }) }
var startAnimation = function (slick, currentSlide) { $(currentSlide.$slider[0]).find('.slick-active').addClass('slick-animate'); }
.animation1.slick-initialized .slick-box { transform: scale(1, 0); transform-origin: center top; transition: 0.8s transform cubic-bezier(0.25, 1, 0.5, 1); } .animation1.slick-initialized .slick-box:nth-child(even) { transform-origin: center bottom; } .animation1.slick-initialized .slick-box:nth-child(3n) { transform: scale(0, 1); transform-origin: left center; } .animation1.slick-initialized .slick-box:nth-child(4n) { transform: scale(0, 1); transform-origin: right center; } .animation1.slick-initialized .slick-animate .slick-box { transform: scale(1, 1); }
$slick.on('afterChange', function (slick, currentSlide) { startAnimation(slick, currentSlide); });
//初期化時に実行される $slick.on('init', function (event, slick, direction) { initSlick(slick, x, y); setBg(slick); setTimeout(function () { startAnimation(slick, slick); }, 500) }); //初期化時とウインドウリサイズ時に実行される $slick.on('setPosition', function (slick) { setBg(slick); }); //アニメーション開始前に実行される $slick.on('beforeChange', function (slick, currentSlide, nextSlide) { endAnimation(slick, currentSlide); }); //アニメーション完了後に実行される $slick.on('afterChange', function (slick, currentSlide) { startAnimation(slick, currentSlide); }); //Slick.js本体の実行 $slick.slick({ fade: true, speed: 0, autoplay: true, pauseOnFocus: false, pauseOnHover: false });