Webサイトやアプリで複数の画像を魅力的に表示する方法の一つとして「カルーセル」があります。特に、回転する3Dカルーセルを実装すると、よりインタラクティブで視覚的に優れたデザインを提供できます。
本記事では、jQueryプラグインの「cloud-carousel.1.0.5.js」を使用し、画像を後ろから前へ回転させながら表示する方法を詳しく解説します。CSS、JavaScript、HTMLを組み合わせて、初心者エンジニアでも簡単に実装できるように手順を説明します。
「cloud-carousel.js」は、複数の画像を立体的に配置し、円形に回転するアニメーションを作成できるjQueryプラグインです。特徴として、次のような機能を提供します。
- 画像を立体的に配置して回転させる
- クリックやマウスホイールで回転操作が可能
- カスタムボタンで左右の移動を制御
- 画像タイトルやalt属性を表示可能
- 自動回転機能付き
本記事では、これらの機能を活用しながら、簡単にカルーセルを実装する方法を解説していきます。
複数画像を後ろから前に回転表示するCSSの記述
カルーセルの基本デザインをCSSで整えます。レイアウトや複数画像、矢印、画像No表示エリアのスタイルを適用し、見た目を整えましょう。
<style type="text/css">
<!--
body{
margin:0;
padding:0;
}
h1{
font-size:16px;
font-weight:normal;
line-height:1.6em;
text-align:center;
padding:15px 0;
}
#idWrap{
width:900px;
margin:0 auto;
text-align:left;
}
#idCarousel {
position: relative;
width:900px;
height:500px;
overflow:scroll;
}
#idTitle{
font-weight:bold;
padding-bottom:7px;
}
.left{
display:none;
width:40px;
height:40px;
position:absolute;
bottom:0;
left:20px;
font-weight:bold;
font-size:30px;
cursor:pointer;
}
.right{
display:none;
width:40px;
height:40px;
position:absolute;
bottom:0;
right:20px;
font-weight:bold;
font-size:30px;
cursor:pointer;
}
.left:hover,
.right:hover{
color:#666666;
}
-->
</style>
cloud-carousel.jsを使って複数画像を後ろから前に回転表示するJavaScriptの記述
JavaScriptでcloud-carouselプラグインを利用し、回転アニメーションを実装します。
jquery.min.js、cloud-carousel.1.0.5.js、jquery.mousewheel.jsファイルを読み込みます。
複数画像エリア（#idCarousel）に対して、位置・NEXT・PREVボタン・画像No・回転速度等を設定します。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="cloud-carousel.1.0.5.js"></script>
<script type="text/JavaScript" src="jquery.mousewheel.js"></script>
<script>
$(function(){
$("#idCarousel").CloudCarousel({
xPos: 450,
yPos: 100,
buttonLeft: $("#left"),
buttonRight: $("#right"),
altBox: $("#idAlt"), //alt
titleBox: $("#idTitle"), //title
bringToFront:true, //クリック画像を前に移動
mouseWheel:true, //マウスホイール回転
autoRotate:true, //自動回転
autoRotateDelay: 3000 //回転速度
});
});
</script>
このスクリプトでは、カルーセルの中心位置（xPos、yPos）、ナビゲーションボタン（buttonLeft、buttonRight）、マウスホイール操作（mouseWheel）、自動回転（autoRotate）などを設定しています。
HTMLの記述
HTMLでは、カルーセルに表示する画像をリストし、ナビゲーションボタンを設置します。
複数画像エリア（id=”idCarousel”）に10枚を用意しました。画像No（id=”idTitle”）、画像のalt（id=”idAlt”）、NEXT（id=”right”）、PREV（id=”left”）ボタンになります。
<div id="idWrap">
<h1>複数画像を後ろから前に回転表示します</h1>
<div id="idCarousel">
<div id="idTitle"></div>
<div id="idAlt"></div>
<img class = "cloudcarousel" src="images/i1.jpg" alt="画像1" title="1個目の画像" />
<img class = "cloudcarousel" src="images/i2.jpg" alt="画像2" title="2個目の画像" />
<img class = "cloudcarousel" src="images/i3.jpg" alt="画像3" title="3個目の画像" />
<img class = "cloudcarousel" src="images/i4.jpg" alt="画像4" title="4個目の画像" />
<img class = "cloudcarousel" src="images/i5.jpg" alt="画像5" title="5個目の画像" />
<img class = "cloudcarousel" src="images/i6.jpg" alt="画像6" title="6個目の画像" />
<img class = "cloudcarousel" src="images/i7.jpg" alt="画像7" title="7個目の画像" />
<img class = "cloudcarousel" src="images/i8.jpg" alt="画像8" title="8個目の画像" />
<img class = "cloudcarousel" src="images/i9.jpg" alt="画像9" title="9個目の画像" />
<img class = "cloudcarousel" src="images/i10.jpg" alt="画像10" title="10個目の画像" />
<div id="left" class="left">←</div>
<div id="right" class="right">→</div>
</div><!--/idCarousel-->
</div><!--/idWrap-->
cloud-carousel：複数画像を後ろから前に回転表示するデモページ
このカルーセルの動作を確認するために、デモページを作成しました。以下のリンクから実際に動作を確認できます。
cloud-carousel：複数画像を後ろから前に回転表示するデモページ
ソース元：Professor Cloud
まとめ
「cloud-carousel.js」を利用すると、簡単に3D回転する画像カルーセルを実装できます。CSS、JavaScript、HTMLを組み合わせることで、初心者エンジニアでも簡単に導入できるので、ぜひ試してみてください！
※流用される場合は自己責任でお願いします。
デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。
