Restore product image carousel

[sacr3dc0w]

What?

Cornerstone lacks an image carousel for product images. This restores that functionality. Slick needs to be triggered on opening modal window for QuickView.

Screenshots

[junedkazi]

@bigcommerce/stencil-team

[junedkazi]

Not sure we should limit to just 4 when we have the count from product.images

[sacr3dc0w]

        <ul class="productView-thumbnails" data-slick='{
                "infinite": false,
                "mobileFirst": true,
                {{#gt product.images.length 6}}
                "slidesToShow": 6,
                {{else}}
                "slidesToShow": {{product.images.length}},
                {{/gt}}
                "slidesToScroll": 1
            }'>

After six thumbnails, things begin to get a little squished.

[junedkazi]

@sacr3dc0w how does it affect product pages which have more than 6 images. Lets say 10 images ? Can you provide a screenshot for that. Also how does it affect other screen sizes like tablet or mobile?

[sacr3dc0w]

@junedkazi Since the width for .productView-thumbnail is 20%, I've adjusted the logic to 5 images. The slick() method will only run if product.images.length is greater than 5.

<ul class="productView-thumbnails"{{#gt product.images.length 5}} data-slick='{
        "infinite": false,
        "mobileFirst": true,
        "slidesToShow": 5,
        "slidesToScroll": 1
}'{{/gt}}>

For products that have more than 5 images, the slick() method is initialized and the additional images can be viewed by clicking next. The screenshots below that have both previous and next arrows visible are products where the next arrow was clicked to demo.

Mobile

Tablet, landscape mode

Tablet, portrait mode

[davidchin]

Looking good so far! One question. Is it possible to customise the colour of the arrows? We need to make sure the arrows are visible on a dark background (i.e.: bold theme). Can you please confirm? Thanks!

[sacr3dc0w]

I decoded the Data URI SVG's for the .slick-prev and .slick-next classes and embedded them as inline SVG's.

• $slick-arrow-prev
• $slick-arrow-next

In doing so, we're able to fill the stroke of the SVG using $slick-arrow-color.

• $slick-arrow-prev: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='42' viewBox='0 0 24 42'%3E%3Cpath d='M22.4572074 1.00746147l-21 20.02482143 20.9479397 19.9751786' stroke='#{$slick-arrow-color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none' fill-rule='evenodd' /%3E%3C/svg%3E");
• $slick-arrow-next: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='42' viewBox='0 0 24 42'%3E%3Cpath d='M1.45679 1.00746147l21 20.02482143L1.50885 41.0074615' stroke='#{$slick-arrow-color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none' fill-rule='evenodd' /%3E%3C/svg%3E");

Light

Bold

Warm

[davidchin]

Nice work man 👍