JavascriptとCSSで3D回転アニメーションするカルーセル ~ mam_rotate_carousel.js

JavascriptとCSSで3D回転アニメーションするカルーセル ~ mam_rotate_carousel.js
普通のカルーセルとは違って3D回転アニメーションしながら画像が切り替わるカルーセル

mam_rotate_carousel.js(17KB)ダウンロード

■使用例

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

<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>