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(); }); `

!