slick demo (original) (raw)
`
$(document).ready(function(){
$('.slide_demo01').slick({
arrows: true,
dots : true,
autoplay: true
});
});
$(document).ready(function(){
$('.slide_demo02').slick({
arrows: false,
autoplay: true,
autoplaySpeed: 0,
speed: 5000,
cssEase: 'linear',
slidesToShow:4,
slidesToScroll: 1
});
});
/* プログレスバー対応 */ $(document).ready(function(){ var time = 10; var $bar, $slick, isPause, tick, percentTime;
slick=slick = slick=('.slide_demo03'); $slick.slick({ draggable: true, adaptiveHeight: false, dots: true, mobileFirst: true, pauseOnDotsHover: true, });
bar=bar = bar=('.progress_bar');
$('#slick_03 + .wrap_slider').on({ mouseenter: function() { isPause = true; }, mouseleave: function() { isPause = false; } })
function startProgressbar() { resetProgressbar(); percentTime = 0; isPause = false; tick = setInterval(interval, 10); }
function interval() { if(isPause === false) { percentTime += 1 / (time+0.1); $bar.css({ width: percentTime+"%" }); if(percentTime >= 100) { $slick.slick('slickNext'); startProgressbar(); } } }
function resetProgressbar() { $bar.css({ width: 0+'%' }); clearTimeout(tick); }
startProgressbar();
});
/* プログレスバー2 */ $(document).ready(function(){ var time = 3; var $bar, $slick, isPause, tick, percentTime;
slick=slick = slick=('.slide_demo04'); $slick.slick({ draggable: true, adaptiveHeight: false, dots: true, mobileFirst: true, pauseOnDotsHover: true, fade: true });
bar=bar = bar=('.slide_demo04 .slick-dots li.slick-active button');
$('.wrap_slider').on({ mouseenter: function() { isPause = true; }, mouseleave: function() { isPause = false; } })
function startProgressbar() { resetProgressbar(); percentTime = 0; isPause = false; tick = setInterval(interval, 10); }
function interval() {
if(isPause === false) {
percentTime += 1 / (time+0.1);
$bar.css({
width: percentTime+"%"
});
if(percentTime >= 100)
{
$slick.slick('slickNext');
startProgressbar();
}
}
}
function resetProgressbar() { bar=bar = bar=('.slide_demo04 .slick-dots li.slick-active button'); $bar.css({ width: 0+'%' }); clearTimeout(tick); } startProgressbar(); }); `
!