JavascriptとCSSで３Ｄ回転アニメーションするカルーセル ～ mam_rotate_carousel.js
普通のカルーセルとは違って３Ｄ回転アニメーションしながら画像が切り替わるカルーセル
-
上記ボタンを押してmam_rotate_carousel.jsをダウンロードします。
- 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>