jQueryでカルーセル

「なんか画像がクルクル回転するやつ」のことをカルーセルというようです。

jQueryのプラグインとして色々と提供されていますが、サンプルとして「bxslider」を使った例を。

手順は下記の３つ。

１．ヘッダに下記３つを記述

<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>

２．jQueryのスクリプトを記述

<script>
  $(document).ready(function(){
    $('.test_slider').bxSlider();
  });
</script>

３．表示する画像をボディに記述（テキトーな画像を並べる）

<div class="test_slider">
  <div><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/></div>
  <div><img src="https://s.yimg.jp/images/top/sp2/cmn/logo-170307.png"/></div>
  <div><img src="https://www.goo.ne.jp/img/gh_logo_smile.png"/></div>
</div>

すると、こんな感じになります。

上記以外に豊富なオプションがあります。

他にも色々とカルーセルのプラグインがある模様。
人気どころは下記のような感じ。大体、使い方は同じようです。

以上