JavaScript 360‑Degree Image Viewer Easy Implementation with mamimgaround2.js

JavaScript 360‑Degree Image Viewer Easy Implementation with mamimgaround2.js

This page introduces mamimgaround2.js, a JavaScript library that makes it easy to implement a 360‑degree image viewer.
By switching multiple still images using mouse drag or a slider, you can rotate products or 3D objects smoothly.
No WebGL required — lightweight, dependency‑free, and simple to integrate. Ideal for checking port locations or structural details.
Capturing an object from multiple angles using a turntable allows for even cleaner and more accurate rotation displays.
Perfect for product previews on e‑commerce sites or as supplementary visuals in technical documentation.

How to Use

1. Click the button above to download mamimgaround2.js.
2. Simply include the following code in your page.

<!-- Set CSS as you like -->
<div id="mia" style="width:100%;max-width:500px;"></div>

<script src="./js/mamimgaround2.js"></script>
<script>
  let mia=new TMamImageAround(
    //Specify the element ID where the images should be displayed
    document.getElementById("mia"),
    [
      //Provide an array of images captured from different angles of the object
      "./carimg/2/c0000.jpg", "./carimg/2/c0010.jpg",
      "./carimg/2/c0020.jpg", "./carimg/2/c0030.jpg",
      "./carimg/2/c0040.jpg", "./carimg/2/c0050.jpg",
      "./carimg/2/c0060.jpg", "./carimg/2/c0070.jpg",
      "./carimg/2/c0080.jpg", "./carimg/2/c0090.jpg",
      "./carimg/2/c0100.jpg", "./carimg/2/c0110.jpg",
    ]
  );
</script>

Example 1

Drag the image left or right with your mouse, or pan on touch devices. You can also switch images by adjusting the slider.

Example 2

Drag the image left or right with your mouse, or pan on touch devices. You can also switch images by adjusting the slider.

<div id="mia2" style="width:100%;max-width:500px;"></div>

<script src="./js/mamimgaround2.js"></script>
<script>
  let mia2=new TMamImageAround(
    //Specify the element ID where the images should be displayed
    document.getElementById("mia2"),
    [
      //Provide an array of images captured from different angles of the object
      "./imgs/fig/01.jpg", "./imgs/fig/14.jpg",
      "./imgs/fig/13.jpg", "./imgs/fig/12.jpg",
      "./imgs/fig/11.jpg", "./imgs/fig/10.jpg",
      "./imgs/fig/09.jpg", "./imgs/fig/08.jpg",
      "./imgs/fig/07.jpg", "./imgs/fig/06.jpg",
      "./imgs/fig/05.jpg", "./imgs/fig/04.jpg",
      "./imgs/fig/03.jpg", "./imgs/fig/02.jpg",
    ]
  );
</script>