jQuery007　カルーセル「Slick」 - ねこきっくぱんちのメモ帳

カルーセル「Slick」

f:id:neko_kick_panch:20170608023905p:plain

■メモ
・RWD対応してるプラグイン
・カスタマイズが楽。css,jsなど必要なものはマスターからコピーして所定のディレクトリで管理。それに合わせてパス修正。
・.slider,.slick-slideクラスあたりでcssを整える。
・埋め込みは外部ファイル化した方がすっきりする。

■コード
htmlのみ

<!DOCTYPE html>
<html>
<head>
  <title>Slick Playground</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/slick.css">
  <link rel="stylesheet" href="css/slick-theme.css">
  <link rel="stylesheet" href="css/style.css">
<style>
h1{
  text-align: center;
}
</style>

</head>
<body>
<h1>regular slider</h1>
  <section class="regular slider">
    <div>
      <img src="http://placehold.it/350x300?text=1" alt="">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=2" alt="">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=3" alt="">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=4" alt="">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=5" alt="">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=6" alt="">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=7" alt="">
    </div>
  </section>
  <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
  <script src="js/slick.js" charset="utf-8"></script>
  <script src="js/script.js"></script>
</body>
</html>

参考
http://on-ze.com/archives/4996
http://kenwheeler.github.io/slick/