【無料】3D回転アニメーションするカルーセルを簡単実装（CSS＋JavaScript）

カルーセルは多くのサイトで使われていますが、ありきたりなデザインでは注目されにくいことも。
そこで、3D回転アニメーションで動くカルーセル「mam_rotate_carousel.js」を使えば、視覚的に魅力的なコンテンツを簡単に実装できます！
本記事では、その設置方法やサンプルコードを詳しく解説。初心者でもすぐに導入できるので、ぜひ試してみてください！

以下ボタンを押してmam_rotate_carousel.jsをダウンロードします。
mam_rotate_carousel.js(17KB)ダウンロード
mam_rotate_carousel.jsを使いたいファイルで、
```
  <script src="./js/mam_rotate_carousel.js"></script>
```
のように、相対又は絶対パスでmam_rotate_carousel.jsを指定します。

■使用例

常時回転するカルーセルを使用

<script src="./js/mam_rotate_carousel.js"></script>
<script>
window.addEventListener("load",function(){
  //■常時回転するカルーセルを使用する場合
  MamRotateCarousel=new TMamRotateCarousel(
    //適用させたいエレメントを指定する
    document.querySelector("#carousel")
  );
});
</script>
<div style="width:100%;max-width:600px;margin:auto;">
  <div id="carousel">
    <a href="" target="_blank"><img src="./imgs/c001.jpg"></a>
    <a href="" target="_blank"><img src="./imgs/c002.jpg"></a>
    <a href="" target="_blank"><img src="./imgs/c003.jpg"></a>
    <a href="" target="_blank"><img src="./imgs/c004.jpg"></a>
    <a href="" target="_blank"><img src="./imgs/c005.jpg"></a>
    <a href="" target="_blank"><img src="./imgs/c006.jpg"></a>
  </div>
</div>

■回転と停止を繰り返すカルーセルを使用

<script src="./js/mam_rotate_carousel.js"></script>
<script>
window.addEventListener("load",function(){
  //■回転と停止を繰り返すカルーセルを使用する場合
  MamRotateCarousel=new TMamRotateCarousel2(
    //適用させたいエレメントを指定する
    document.querySelector("#carousel2")
  );
});
</script>

<div style="width:100%;max-width:600px;margin:auto;">
  <div id="carousel2">
    <a href="" target="_blank"><img src="./imgs/c001.jpg"></a>
    <a href="" target="_blank"><img src="./imgs/c002.jpg"></a>
    <a href="" target="_blank"><img src="./imgs/c003.jpg"></a>
    <a href="" target="_blank"><img src="./imgs/c004.jpg"></a>
    <a href="" target="_blank"><img src="./imgs/c005.jpg"></a>
    <a href="" target="_blank"><img src="./imgs/c006.jpg"></a>
  </div>
</div>