Product Item Viewer Carousel with CSS3 & jQuery

Plugin Preview

Share this:

How to start using jQuery?

More jQuery Top, Best and New Plugins

Top 100 jQuery Plugins

Plugin Overview

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

Demo Download

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;}

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.