slickでズームインフェードをやる

個人的メモ

<script src="_js/slick.js"></script>
<link rel="stylesheet" href="_js/slick.css">
<style>
@keyframes zoomIn {
0% { transform:scale(1); }
100% { transform:scale(1.1); }
}
@-webkit-keyframes zoomIn {
0% { transform:scale(1); }
100% { transform:scale(1.1); }
}
.slick-slide.moving {
animation: 11s zoomIn;
}
</style>
<script>
$('.slideshow').on('init', function(){
$('.slick-slide[data-slick-index="0"]').addClass('moving');
}).slick({
arrows: false,
dots: false,
infinite: true,
fade: true,
speed: 3000,
autoplay: true,
pauseOnHover: false,
centerMode: true
}).on('beforeChange',function(event, slick, currentSlide, nextSlide){
var slide_num = $('.slick-slide').length;
$('.slick-slide[data-slick-index="'+ ( currentSlide - 1 ) +'"]').removeClass('moving');
$('.slick-slide[data-slick-index="'+nextSlide+'"]').addClass('moving');
if( currentSlide == 0 ){
$('.slick-slide[data-slick-index="'+ ( slide_num - 1 ) +'"]').removeClass('moving');
}
});
</script>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です