Free 3D Rotating Carousel — Easy Implementation with CSS and JavaScript

Free 3D Rotating Carousel — Easy Implementation with CSS and JavaScript

Carousels are widely used across many websites, but ordinary designs can sometimes fail to catch the eye.
With “mam_rotate_carousel.js,” you can easily create a visually engaging carousel featuring a 3D rotating animation!
This article explains how to set it up and provides sample code, making it simple enough for beginners to start using right away. Give it a try!

1. Click the button below to download mam_rotate_carousel.js.
   Download mam_rotate_carousel.js (17KB)
   
2. In the file where you want to use mam_rotate_carousel.js, specify it with a relative or absolute path, like this:
   

             <script src="./js/mam_rotate_carousel.js"></script>
           

   
   

■ Examples

Using a Continuously Rotating Carousel

<script src="./js/mam_rotate_carousel.js"></script>
<script>
window.addEventListener("load",function(){
  //■For a carousel that rotates continuously
  MamRotateCarousel=new TMamRotateCarousel(
    //Specify the element to apply the carousel to
    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>

Using a Carousel That Repeats Rotation and Stopping

<script src="./js/mam_rotate_carousel.js"></script>
<script>
window.addEventListener("load",function(){
  //■For a carousel that alternates between rotating and stopping
  MamRotateCarousel=new TMamRotateCarousel2(
    //Specify the element to apply the carousel to
    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>