jQueryプラグインのGlide.jsを試してみる

JavaScript

jQueryプラグインのGlide.jsを試してみる。

Glide.js | Simple, Lightweight & Fast jQuery Slider
http://glide.jedrzejchalubek.com/

ファイルを下記のような感じで設置。

├ HTMLファイル
├ img
│├ 001.png
│├ 002.png
│└ ・・・
├ jquery.glide.min.js
└ style.css

HTMLは下記のような感じで書く。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="jquery.glide.min.js"></script>
<script>
  $(function(){
    $('.slider').glide();
  });
</script>
<style>
  ul {
    margin: 0px;
    padding: 0px;
  }
  .slider__item img {
    width: 100%;
  }
</style>
</head>
<body>
  <div class="slider">
    <ul class="slider__wrapper">
      <li class="slider__item"><img src="img/001.png"></li>
      <li class="slider__item"><img src="img/002.png"></li>
      <li class="slider__item"><img src="img/003.png"></li>
      <li class="slider__item"><img src="img/004.png"></li>
      <li class="slider__item"><img src="img/005.png"></li>
    </ul>
  </div>
</body>
</html>

デモ