Product Item Viewer Carousel with CSS3 & jQuery

The Item Viewer is a responsive, cross browser and lightweight jQuery plugin that helps you to create product item viewer carousel / gallery. Basically, it is well designed single product’s image carousel with small thumbnails. When user click on image thumbnail, the large image of product fade in.

Also, this plugin provide beautiful template of product details, i.e description, buy button, product size & quantity etc.

Plugin Overview

Plugin: Item viewer
Author: Stanislav Andreev
Licence: MIT Licence
Published: June 9, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 639 KB

How to Use Product Item Viewer Carousel

1. To create product image carousel, first of all load the jQuery and item viewer‘s CSS and JavaScript file into your HTML document.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- Item Viewer CSS -->
<link rel="stylesheet" href="css/style.css" />

<!-- Item Viewer Js -->
<script src="js/viewer.js"></script>

2. After that, create HTML structure for your product’s image gallery / carousel with basic product details.

 <div class="gallery">
        <div id="photo-viewer"></div>
        <div id="thumbnails">
          <a href="img/photo-1.jpg" class="thumb active" title="Pierre Cardin"><img src="img/thumb-1.jpg" alt="Mens Polo Shirt" /></a>
          <a href="img/photo-2.jpg" class="thumb" title="Pierre Cardin"><img src="img/thumb-2.jpg" alt="Mens Polo Shirt" /></a>
          <a href="img/photo-3.jpg" class="thumb" title="Pierre Cardin"><img src="img/thumb-3.jpg" alt="Mens Polo Shirt" /></a>
          <a href="img/photo-4.jpg" class="thumb" title="Pierre Cardin"><img src="img/thumb-4.jpg" alt="Mens Polo Shirt" /></a>
          <a href="img/photo-5.jpg" class="thumb" title="Pierre Cardin"><img src="img/thumb-5.jpg" alt="Mens Polo Shirt" /></a>
        </div>
      </div>
      <div class="description">
        <p class="standfirst">
          <strong>Pierre Cardin Cut And Sew Polo Shirt Mens</strong>
        </p>
        <p>
          Designed with a classic fold down collar that features a three button fastening placket, three cut and sew tri-coloured panels, single coloured back and short sleeves.
        </p>
        <p><strong>$10.75</strong></p>
        <form action="#">
        <p><strong>Size:</strong>
          <select class="choice">
            <option value="Small" selected>Small</option>
            <option value="Medium">Medium</option>
            <option value="Large">Large</option>
            <option value="Extra Large">Extra Large</option>
            <option value="XX Large">XX Large</option>
          </select>
        </p>
        <p><strong>Quantity:</strong> <input class="choice" id="number" type="number" value="1" />
        </p>
      </form>
        <a href="#" id="buy">Buy now</a>
      </div>

Note: The item viewer plugin will automatically initialized on body load.

3. The basic CSS styles to customize the item image viewer.

  /********** MAIN PICTURE **********/
  #photo-viewer {
    position: relative;
    height: 300px;
    overflow: hidden;}

  #photo-viewer.is-loading:after {
    content: url('../img/load.gif');
    position: absolute;
    top: 0;
    left: 0;}

  #photo-viewer img {
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    top: 50%;
    left: 50%;}

  /********** THUMBNAILS **********/
  #thumbnails {
    margin: 10px 5px 0 0;
    height: 60px;}

  a.active {
    opacity: 0.3;}

  /********** PARTS OF PAGES **********/
  .gallery{
    width: 400px;
    padding: 20px;
    float: left;}

  .description {
    width: 180px;
    float: right;
    padding: 20px 20px 0 0;
    font-size: 85%;
    line-height: 1em;}

  .standfirst {
    margin: 0;}

  /********** BUY BUTTON **********/
  a#buy {
    background-color: #cc3333;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 7px 10px 9px 10px;
    margin: 5px 0 20px 0;
    float: left;
    letter-spacing: 0.1em;
    text-transform: uppercase;}

  a#buy:hover {background-color: #333;}