March 20, 2015 | 11 Feedbacks

Product Preview Slider

An easy way to show more product images and variations right in the product gallery.

Browser support

ie
Chrome
Firefox
Safari
Opera

While you scroll through pages of products, you often base your decision to “know more” about a product on pictures only. Visual impact, in particular on mobile devices, is essential to everyone’s buying process.

What if a product is available in different colors? This is a piece of information generally not available to the user until he/she is willing to go to the product page. A different UX approach, the one of today’s resource, is to let the user interact with the product preview right in the main gallery page. A simple slider, to check product variations before jumping into the product page, could be a way to increase conversion rates.

Beautiful product pictures from Ugmonk.

Creating the structure

The HTML structure is an unordered list. Each list item contains a nested unordered list (with product images) and the product info (title and price).

<li>

</li>

</li>

<li>

</li>

</ul>

</a>

<b><a href="#0">Mountains</a></b>

</div>

</li>

</ul>

Note that the .cd-dots elements (dots navigations for each product slider) and the .cd-new-price (new price if product is on sale) are not directly inserted in the html but created using jQuery.

Adding style

On small screens, the product preview images are visible by default: we assume the user will see one product at a time so he/she won’t get distracted. User can then browse through them both by swiping or clicking on the preview images.

By default, the list items are in absolute position and translated on the right (outside their .cd-gallery parent) so they are not visible. We then declared 4 classes to properly style them: .selected (added to the first list item – main visible image), .move-right (added to the second list item – preview image on the right), .move-left (preview image on the left) and .hide-left (hidden items on the left).

.cd-item-wrapper li {

position: absolute;

top: 0;

left: 25%;

width: 50%;

opacity: 0;

transform: translateX(200%) scale(0.7);

}

.cd-item-wrapper li.selected {

/* selected item */

position: relative;

opacity: 1;

transform: translateX(0) scale(1.3);

}

.cd-item-wrapper li.move-right {

/* item on right - preview visible */

transform: translateX(100%) scale(0.7);

opacity: 0.3;

}

.cd-item-wrapper li.move-left {

/* item on left - preview visible */

transform: translateX(-100%) scale(0.7);

opacity: 0.3;

}

.cd-item-wrapper li.hide-left {

/* items hidden on the left */

transform: translateX(-200%) scale(0.7);

}

On bigger screens, user sees more products at a time so we decided to hide the preview images to assure a cleaner experience.

When user hovers over one of the product, we assume his focus is on that particular product so the preview images are shown. 3 additional classes have been declared: .hover (assigned to the preview item when user hovers over it), .focus-on-right, (assigned to the .selected and .move-left items when user hovers over the .move-right element) and .focus-on-left (assigned to the .selected and .move-right items when user hovers over the .move-left element).

@media only screen and (min-width: 1048px) {

.cd-item-wrapper li.move-left,

.cd-item-wrapper li.move-right {

/* hide preview items */

opacity: 0;

}

.cd-item-wrapper li.focus-on-left {

/* class added to the .selected and .move-right items when user hovers over the .move-left item (item preview on the left) */

transform: translateX(3%) scale(1.25);

}

.cd-item-wrapper li.focus-on-left.move-right {

transform: translateX(103%) scale(0.7);

}

.cd-item-wrapper li.focus-on-right {

/* class added to the .selected and .move-left items when user hovers over the .move-right item (item preview on the right) */

transform: translateX(-3%) scale(1.25);

}

.cd-item-wrapper li.focus-on-right.move-left {

transform: translateX(-103%) scale(0.7);

}

.cd-item-wrapper li.hover {

/* class added to the preview items (.move-left or .move-right) when user hovers over them */

opacity: 1;

}

.cd-item-wrapper li.hover.move-left {

transform: translateX(-97%) scale(0.75);

}

.cd-item-wrapper li.hover.move-right {

transform: translateX(97%) scale(0.75);

}

Events handling

We used jQuery to implement the product image slider (with touch swipe navigation, previous/next and dots navigation).
Besides, we defined the updatePrice() function to update the product price (if on sale). This function checks if the selected item is on sale (data-sale="true") and, if that’s the case, adds the on-sale class to the .cd-price element (crossing line visible on the old price) and inserts a new .cd-new-price element (its text equals to the selected item data-price).
You can see the live effect in our demo on the t-shirt product.

function updatePrice(container, n) {

//container -> each one of the $('.cd-gallery').children('li')

//n -> index of the selected item in the .cd-item-wrapper

var priceTag = container.find('.cd-price'),

selectedItem = container.find('.cd-item-wrapper li').eq(n);

if( selectedItem.data('sale') ) {

// if item is on sale - cross old price and add new one

priceTag.addClass('on-sale');

var newPriceTag = ( priceTag.next('.cd-new-price').length > 0 ) ? priceTag.next('.cd-new-price') : $('<em class="cd-new-price"></em>').insertAfter(priceTag);

newPriceTag.text(selectedItem.data('price'));

setTimeout(function(){ newPriceTag.addClass('is-visible'); }, 100);

} else {

// if item is not on sale - remove cross on old price and sale price

priceTag.removeClass('on-sale').next('.cd-new-price').removeClass('is-visible').on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){

priceTag.next('.cd-new-price').remove();

});

}

Changelog

March 20, 2015

Resource released by CodyHouse

Claudia Romano

Web developer, fan of The Big Bang Theory and good food. Co-founder of CodyHouse. You can follow her on Twitter.

Andrew Dotson

Nice! This is great
Carlos

This is awesome! Thank you guys for all the hard work!
http://www.dewdropdeveloper.com Syed Sirat Ullah

Mind blowing product slider..
JaseemJas

Really nice!
majid1889

Thanks Dude ;)
http://www.batdelfuego.com David Couillard

You make me want to redesign my entire web store… I love all your demos!
Ever though of building a one bundle/framework that would have all these plugins integrated someway?
I’d gladly pay for that!
Aicke Schulz

I really like the idea and visual style!

But, for performance reasons I’m not satisfied with the solution in it’s current form. The additional images are loaded, no matter if they will be visible or not. This will increase the initial pageload, e.g. in the demo 450kb instead of 150kb.

So, before somebody, who have to keep in mind the perfomance of the page, uses this in a productive environment, the code could/should be improved with stuff like lazyloading and responsive image handling.
- http://codyhouse.co/ Sebastiano Guerriero
  
  That’s a good point. We try to keep the resources as simple as possible, so they are easier to integrate. In some cases they need tweaks before being used into a productive environment. In this case, a responsive image handling script would def result in better performance.
Chuck C

Good job, as usual.
Hanumat

I believe that initial product should be in the center, that is in the position 2 of the slide.
greg

Hi, this is really nice product slider. I have one question.. How can I visible more products to show?