3D Product Image Slider / Viewer Plugin With jQuery

A Microsoft Studio Slider inspired 3D image viewer that allows to display a 360 degree view of your product image from all angles. The goal of this plugin is to change the background position of your sprite image using a normal range input control.

How to use it:

1. Create a sprite image from your product images with different angles.

2. Create an empty container for the 3D image viewer.

<div class="slider3d-wrapper" 
     data-image-size="400px">
</div>

3. Insert the sprite image as a background into the container.

.slider3d-wrpper {
  width: 100%;
  margin: 0;
  padding: 0;
  background: url(slide_image.jpg);
  background-size: 100% 3600%;
  background-repeat: no-repeat;
  background-position: 0 0;
}

4. Create a range slider which allows the user to slide through your product images.

<input class="ranger" type="range" min="0" max="35" value="0" step="1">

5. Include the latest jQuery library at the bottom of the webpage.

<input class="ranger" type="range" min="0" max="35" value="0" step="1">

6. The jQuery script to change the background position as you drag the slider control.

$(".slider3d-wrapper").css({ "height":$(".slider3d-wrapper").data("image-size") });
  $(".ranger").on("input change",function(){
  var position = $(this).val()*$(this).parent().find(".slider3d-class").height();
  $(this).parent().find(".slider3d-class").css({"background-position-y": -position });
});

---

This awesome jQuery plugin is developed by anik4e. For more Advanced Usages, please check the demo page or visit the official website.