slicksliderサンプル

設置に関する詳細は、こちらをご参照ください。

Single Item

  • image01
  • image02
  • image03

$(function(){
$('.single-item').slick({
autoplay:true,
autoplaySpeed:4000,/*サンプルのため切り替え早めてあります*/
dots:true,
});
});

●フェイドインアウトをする場合は、fade:trueを追加させてください。

Multiple Items

image01
image02
image03
image01
image02
image03
image01
image02
image03
image01
image02
image03
image01
image02
image03

$(function() {
    $('.multiple-item').slick({
          infinite: true,
          dots:true,
          autoplay:true,
          slidesToShow: 6,
          slidesToScroll: 6,
});
});

Autoplay

個人的には、よく使うスタイルです。
image01
image02
image03
image01
image02
image03
image01
image02
image03
image01
image02
image03
image01
image02
image03

$(function() {
    $('.autoplay').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 2000,
});
});