JavaScript
jQuery
unslider

unsliderを触ってみたよ。

色々なサイトで画像がスライドする場所があって、実装方法が気になったので、調べました。

とりあえずこれ書けば動くレベルのソース、各パラメータの説明を載せておきます。オプションが豊富すぎるので、公式を元に色々弄るのが正道かな。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="unslider.min.js"></script>
    <script type="text/javascript">
    $(function() {
    $('.banner').unslider({
      autoplay: false,          //自動的に画像がスライドするかどうか
      speed: 500,               // スライドの速さ
      delay: 3000,              // スライドの間隔
      arrows: {
            prev: '<a class="unslider-arrow prev">&#10094;</a>',
            next: '<a class="unslider-arrow next">&#10095;</a>'
        },  // 手動で移動させるアイコンの設定。falseで消える。こんな感じに上書きして設定することも可能。
      keys: true,               // キーボード操作の有無
      index: 'first',           // lastにすると、画面時にfirstからlastまで右スライド移動する
      nav: true,               // スライダーする画像の下のボタンの有無
      animateHeight: false,    // スライダーの高さの調整。falseは、高さが一番高い画像に合わせる。true時は、画像ごとにスライダーの高さを合わせる
      infinite: true          // スライダーが端の時に、次にどこに行くか(trueなら最初⇄最後)
    })
  });
    </script>
<link rel="stylesheet" href="unslider.css">
<style>
.banner {
  width: 600px;
  text-align: center;
  margin: 0 auto;
}
.banner { position: relative; overflow: auto; }
.banner ul { list-style: none; }
.unslider-arrow {
    position:absolute;
    top: 45%;
    z-index:2;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 24px;
    color: #f9f9f9;
    text-align: center;
    border-radius: 50%;
    background-color: #333;
    cursor:pointer;
}
.unslider-arrow.prev { left:20px }
.unslider-arrow.next { right:20px }
</style>
  </head>
  <body bgcolor="green">
    <div class="banner">
      <ul>
        <li><img src="./img/sample01.png" width="500" height="400" alt=""></li>
        <li><img src="./img/sample02.png" width="500" height="400" alt=""></li>
        <li><img src="./img/sample03.jpeg" width="500" height="400" alt=""></li>
      </ul>
    </div>
  </body>
</html>

で、今回作成したものはこちら。
unslider.mov.gif