js/web

slick sliderの使い方 [2]

Posted on by cogumo

どうしてslickを使うのかときかれると色々オプションがあるからというのも大きな一つの理由です。色々説明されているサイトがあるのでしらべていけばよいのですが毎回調べるのが大変なので自分のためにもと思いよく使うものをざっくり

たとえば

・自動再生：autoplay（デフォルトはtrue)

・左右の矢印をカスタマイズ：arrows（デフォルトはtrue）

・スピード：speed（ミリ秒です！１秒＝1000ミリ秒）

・スライドをループ：infinite（デフォルトはtrue）

「slick　オプション」で検索すると色々出て来ます！

上記を実装したのがこちらです。

commmon.js

$(function(){
  $(".slides").slick({
  	autoplay: true,
    speed: 1000,
    prevArrow: '<button class="slide-arrow prev"></button>',
    nextArrow: '<button class="slide-arrow next"></button>',
    infinite: true,
});
});

common.css

/*arrow*/
button{
  margin: 0;
  padding: 0;
  background: none;
}
.slide-arrow{
  position: absolute;
  top: 50%;
}
.slide-arrow.prev{
  left: -40px;
  width: 0;
  height: 0;
  border-left: 0 solid transparent;
  border-right: 15px solid #9C27B0;
  border-top: 21px solid transparent;
  border-bottom: 21px solid transparent;
}
.slide-arrow.next{
  right: -40px;
  width: 0;
  height: 0;
  border-right: 0 solid transparent;
  border-left: 15px solid #9C27B0;
  border-top: 21px solid transparent;
  border-bottom: 21px solid transparent;
}

ここのサンプルはこちら

cogumo