turntable.jsを使ってスクロールまたはXY軸カーソル移動で複数画像を切替え表示する方法｜DAD UNION

turntable.jsを使ってスクロールまたはXY軸カーソル移動で複数画像を切替え表示する方法をご紹介します。
複数枚のコマ送り画像を用意して切替表示するとアニメーションみたいに出来ます。回転する3D画像を用意しても良いですね。

Contents

turntable.jsを使ってスクロールまたはXY軸カーソル移動で複数画像を切替え表示するCSS記述
turntable.jsを使ってスクロールまたはXY軸カーソル移動で複数画像を切替え表示するHTML記述
turntable.jsを使ってスクロールまたはXY軸カーソル移動で複数画像を切替え表示するJavaScriptの記述
turntable.jsを使ってスクロールまたはXY軸カーソル移動で複数画像を切替え表示するデモページ
ソース元：Turntable.js : A Responsive JQuery Slider

turntable.jsを使ってスクロールまたはXY軸カーソル移動で複数画像を切替え表示するCSS記述

※複数画像を切替表示するエリア（.turntable、.turntable ul、.turntable ul li）のCSS記述です。必要に応じて変更して下さい。

<style>
body{
  padding: 0;
  margin: 0;
  text-align: center;
  font-size: 16px;
}
h1{
  font-size:20px;
  line-height:1.6em;
  text-align:center;
  padding: 15px 0 25px 0;
}
.turntable {
  margin: 0px auto;
  width:  500px;
}
.turntable ul {
  padding: 0px;
  margin: 0px; 
}
.turntable ul li {
  list-style-type: none;
  display: none; 
}
.turntable ul li img {
  width: 100%; 
}
.turntable ul li.active {
  display: block; 
}
</style>

turntable.jsを使ってスクロールまたはXY軸カーソル移動で複数画像を切替え表示するHTML記述

※複数画像を切替表示するエリア（#myTurntable）内のliタグに7枚の画像（1～7.jpg）を用意します。

<h1>turntable.jsを使ってスクロールまたはXY軸カーソル移動で複数画像を切替え表示します。<br>以下の画像上でマウスカーソルを左右に移動させてみて下さい。</h1>

<div id="myTurntable" class="turntable">
  <ul>
    <li data-img-src="1.jpg"></li>
    <li data-img-src="2.jpg"></li>
    <li data-img-src="3.jpg"></li>
    <li data-img-src="4.jpg"></li>
    <li data-img-src="5.jpg"></li>
    <li data-img-src="6.jpg"></li>
    <li data-img-src="7.jpg"></li>
  </ul>
</div>

turntable.jsを使ってスクロールまたはXY軸カーソル移動で複数画像を切替え表示するJavaScriptの記述

※jquery.min.js（v2.2.4）、turntable.jsファイルを読み込みます。$(‘切替表示するエリア’).turntable({オプション})を記述します。axisには’x, y, or scroll’の様にx軸、y軸、ページスクロールで切替るのかを指定します。

<script type="text/javascript" src="jquery.min.js"></script>
<script src="turntable.js"></script>
<script type="text/javascript">
$('#myTurntable').turntable({
  axis: 'x',
  reverse: true
});
</script>