How to get thumb images as individual slide images? - shopify

Question

I am using Brooklyn Shopify theme in mobile the main featured image is in single slide and all the thumbs in one slide, butnow I want each thumb images as single slideshow images just like featured image.

Answer 1

You can do this using some CSS tricks and duplicating fetching of images.
In Product.liquid file duplicate the code images fetched as you said you are using Brooklyn theme I will help you with the same.
Find for this code
<div class="grid product-single">
<div class="grid__item large--seven-twelfths medium--seven-twelfths text-center">
<div class="product-single__photos">
{% assign featured_image = current_variant.featured_image | default: product.featured_image %}
{% comment %}
Display current variant image, or default first
{% endcomment %}
<div class="feature_image top_feature_image">
<div class="product-single__photo-wrapper">
<img class="product-single__photo" id="ProductPhotoImg" src="{{ featured_image | img_url: 'grande' }}" {% if settings.product_zoom_enable %}data-mfp-src="{{ featured_image | img_url: 'grande' }}"{% endif %} alt="{{ featured_image.alt | escape }}" data-image-id="{{ featured_image.id }}">
</div>
</div>
{% comment %}
Display rest of product images, not repeating the featured one
{% endcomment %}
<div class="thumb_images">
{% for image in product.images | limit:4 %}
<div class="product-single__photo-wrapper">
<img class="product-single__photo" src="{{ image.src | img_url: 'grande' }}" {% if settings.product_zoom_enable %}data-mfp-src="{{ image.src | img_url: '1024x1024' }}"{% endif %} alt="{{ image.alt | escape }}" data-image-id="{{ image.id }}">
</div>
{% endfor %}
</div>
</div>
</div>
then Replace with
<div class="grid product-single">
<div class="grid__item large--seven-twelfths medium--seven-twelfths text-center">
<div class="product-single__photos">
{% assign featured_image = current_variant.featured_image | default: product.featured_image %}
{% comment %}
Display current variant image, or default first
{% endcomment %}
<div class="feature_image top_feature_image">
<div class="product-single__photo-wrapper">
<img class="product-single__photo" id="ProductPhotoImg" src="{{ featured_image | img_url: 'grande' }}" {% if settings.product_zoom_enable %}data-mfp-src="{{ featured_image | img_url: 'grande' }}"{% endif %} alt="{{ featured_image.alt | escape }}" data-image-id="{{ featured_image.id }}">
</div>
</div>
{% comment %}
Display rest of product images, not repeating the featured one
{% endcomment %}
{% for image in product.images | limit:3 %}
<div class="product-single__photo-wrapper desk">
<img class="product-single__photo" src="{{ image.src | img_url: 'grande' }}" {% if settings.product_zoom_enable %}data-mfp-src="{{ image.src | img_url: '1024x1024' }}"{% endif %} alt="{{ image.alt | escape }}" data-image-id="{{ image.id }}">
</div>
{% endfor %}
<div class="thumb_images">
{% for image in product.images | limit:4 %}
<div class="product-single__photo-wrapper">
<img class="product-single__photo" src="{{ image.src | img_url: 'grande' }}" {% if settings.product_zoom_enable %}data-mfp-src="{{ image.src | img_url: '1024x1024' }}"{% endif %} alt="{{ image.alt | escape }}" data-image-id="{{ image.id }}">
</div>
{% endfor %}
</div>
</div>
</div>
Now open theme.scss.liquid file and for desktop add this
.desk {
display: none;
}
.desk is the custom class taken by me
and in mobile style ie 767px add this.
.product-single__photo-wrapper.desk {
display: block;
}
.thumb_images {
display: none !important;
}
.slick-dots > li:last-child, .slick-dots > li:nth-last-child(2) {
display: none;
}
This will solve your requirement.