product-slider
March 20, 2015 | 42 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
9+

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).

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).

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).

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.

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 and Nucleo. 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.

    • Donald McKendrick

      But then to see all images the user has to go back and forth. If the slider looped then it wouldn’t be and issue, you would always have products on either side, and the user wouldn’t have to backtrack.

      • Hanumat

        Yep, totally agree, the slider should be looped.

  • greg

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

  • tal mi

    Hi ,
    can i change price for each “Shirt” in same box?

    thank you.

  • Mohsin

    Hi,
    This is Nice Product Slider . I have one Question.. How Can i Add this slider in My Own Web ?

  • Влад Шворук

    Nice job! But can anyone explain why images are better rendrered in Firefox than other browsers?

  • tal mi

    how can i change a href for each product?

    • http://www.umgsfrontier.com ZIAL

      @tal_mi:disqus Do you mean different href or link of every product image ? if so i have a solution for that just try put a href after the and before .

      for example :

      li class=”selected”
      a herf (HERE)
      img (PRODUCT IMAGE PATH)
      /a
      /li

      #hope it’s not too late to help you . :)

  • Fuad Arbiansyah

    how i can make this slider can be dragable like http://www.nixon.com/jp/en/clp/mens/ .. any sugestion for the script??

  • Bryan Kinnear

    I’m implementing this now and I’ve literally copied/pasted but my images are getting a dot inserted before them, any ideas why this might be happening?

    • Hanumat

      a dot?
      well… do you have a pen (http://codepen.io/) about it?

      • Bryan Kinnear

        I don’t, here’s a screenshot of it though. The strange thing is that if I change the CSS of the dots themselves this doesn’t change. It’s not a stray period or anything either, I’ve checked that.

        • Hanumat

          Try just to use 3 img! or
          Maybe the bullets container needs more width!

          • Bryan Kinnear

            Yeah, I’ve only got 3 images in there. It doesn’t move if I alter the dot container at all. I’ll keep messing around with it. Thanks though

          • http://codyhouse.co Claudia Romano

            Hi Bryan, I think that’s because you didn’t include the reset.css file. If you don’t want to include it, add to you css file:

            That should fix it!

          • Bryan Kinnear

            That doesn’t seem to be it either. I’m ensuring that list-style-type is being applied when the page is rendered. The dot seems to not be attached to the list when I hover over with inspect element. Thanks for all the suggestions!

          • Expert Boys

            Hello Claudia Romano plz tell me how to add left right arrow in this slider… plz ans me asap..

  • http://www.umgsfrontier.com ZIAL

    whoa ! CODYAWESOMENESS ! super great tutorial BD . BTW , how can i align 4 products ? instead by 2 in default . pls help :(

    • http://codyhouse.co Claudia Romano

      Hi, try changing the width of the .cd-gallery > li list items. Hope this helps!

      • http://www.umgsfrontier.com ZIAL

        work like a charm maam Claudia . thanks . BTW , can i use this in shopify themes ? i want to use this in product-grid-item.liquid . but i’m afraid .

  • Wojciech Kaliszewski

    Hello, if you can, somehow convert slider on the carousels to make the products rotate in a circle ?

  • totneschap

    This doesn’t work any more

    • http://codyhouse.co Claudia Romano

      Hi! Just tested it on Chrome and Firefox and it’s working fine! what issue are you experiencing and which browser are you using? Thank you!

      • totneschap

        Hi, sorry but this does seem to work now. I’m on firefox and the images slider wasn’t working but it is now!

        • Manuplus

          The same on Chrome (47.0.2526.80 m)

  • Tubagus Putra

    Is it possible if this slider can show up more than 3 items?

  • http://www.umgsfrontier.com ZIAL

    this one is sick! very simple and neat . i used these for my product page .
    and I’m wondering is it possible if the user click the next image or the dot , then the title and price are also change ?? if it’s possible can anyone help me out ? please ..
    BTW thank you so much codyhouse ! keeprockin!

  • Expert Boys

    Hello Guys.. plz tell me how to add left right arrow in this slider… plz ans me asap..

  • Expert Boys

    Any One There Plz Help me. How to add left and right arrows with infinite loop in this slider with js

  • Nicole Post

    Any updates on how to make the slider loop?

  • Sam

    Yes I am also wondering how to loop this. I’ve implemented this into a wordpress site and I have the images dynamically pulling from the admin. Is there a way of automatically adding the move-right move-left classes to the corresponding li tags?

  • Syed Kazimi

    Hi,
    I am trying to use this with your content filter ( https://codyhouse.co/gem/content-filter/ ), but these two are not working together.