<tutorialjinni.com/>

Free 360 Product Viewer

Posted Under: HTML5, JavaScript, jQuery, jQuery Plugins, Tutorials on Feb 20, 2023
Free 360 Product Viewer
Using a 360 degree image viewer for products on websites offers numerous advantages. It provides customers with an enhanced experience by allowing them to view products from multiple angles, increasing sales and reducing returns. By using this technology, businesses can gain a competitive advantage and save time for both customers and themselves. Moreover, it increases transparency and builds customer trust by allowing customers to view products in a more realistic way, which is especially important for e-commerce businesses. Overall, a 360 degree image viewer is an excellent tool for showcasing products and improving the customer experience. Turntable is a jQuery plugin that will flip through a list of images as your mouse sweeps across a container. Add turntable simply by using the give CDN link. Watch below video for how it will render. 



<html>
<head>
    <title>Free 360 Product Viewer</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
		.turntable {
		  display: inline-block;
		  margin: 0px;
		}
		.turntable ul {
		  padding: 0px;
		  margin: 0px;
		}
		.turntable ul li {
		  list-style-type: none;
		  display: none;
		}
		.turntable ul li img {
		  width: 100%;
		}
		.turntable ul li.active {
		  display: block;
		}
    </style>

    <!-- CDN Link -->
    <script src="https://cdn.tutorialjinni.com/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://g.tutorialjinni.com/PolarNotion/turntable/js/main.min.js"></script>

</head>
<body>
<center>
    <br/><br/>
    <h1>Free 360 Product Viewer</h1>
    <br/>
    <div id="myTurntable" class="turntable">
        <ul>
            <li data-img-src="imgs/01-1.png"></li>
            <li data-img-src="imgs/02-1.png"></li>
            <li data-img-src="imgs/03-1.png"></li>
            <li data-img-src="imgs/04-1.png"></li>
            <li data-img-src="imgs/05-1.png"></li>
            <li data-img-src="imgs/06-1.png"></li>
            <li data-img-src="imgs/07-1.png"></li>
            <li data-img-src="imgs/08-1.png"></li>
            <li data-img-src="imgs/09-1.png"></li>
            <li data-img-src="imgs/10-1.png"></li>
            <li data-img-src="imgs/11-1.png"></li>
            <li data-img-src="imgs/12-1.png"></li>
            <li data-img-src="imgs/13-1.png"></li>
            <li data-img-src="imgs/14-1.png"></li>
            <li data-img-src="imgs/15-1.png"></li>
            <li data-img-src="imgs/16-1.png"></li>
            <li data-img-src="imgs/17-1.png"></li>
            <li data-img-src="imgs/18-1.png"></li>
            <li data-img-src="imgs/19-1.png"></li>
            <li data-img-src="imgs/21-1.png"></li>
            <li data-img-src="imgs/22-1.png"></li>
            <li data-img-src="imgs/22-1.png"></li>
            <li data-img-src="imgs/23-1.png"></li>
            <li data-img-src="imgs/24-1.png"></li>
            <li data-img-src="imgs/25-1.png"></li>
            <li data-img-src="imgs/26-1.png"></li>
            <li data-img-src="imgs/27-1.png"></li>
            <li data-img-src="imgs/28-1.png"></li>
            <li data-img-src="imgs/29-1.png"></li>
            <li data-img-src="imgs/30-1.png"></li>
            <li data-img-src="imgs/31-1.png"></li>
            <li data-img-src="imgs/32-1.png"></li>
        </ul>
    </div>
    </center>
    <script>
        $('#myTurntable').turntable();
    </script>
</body>
</html>


imgae