Masonry Theme product slideshow display customization

New Member
5 0 0

Hi,

I'm using the Masonry theme and am trying to get the slideshow in the product page to display only one image at a time. Currently, it's showing the first photo plus a crop of the following photo. If anyone could provide help or suggestions on how to make this change, I would really appreciate it! Thank you.

website: ladymarlowe.com

password: giavod

this is in the product-template.liquid

 <div class="product-container cf">
        <div class="product-gallery {% if product.images.size == 1 %}single-image{% endif %}">
          <div class="swiper-container gallery-top">
            <div class="swiper-wrapper">
              {% for image in product.images %}
              <div class="swiper-slide" {% if featured_image == image %}data-featured="true"{% endif %}>
                <a href="{{ image | product_img_url: '1024x' }}" title="{{ image.alt | escape }}" data-full-size-src="{{ image | product_img_url: 'master' }}">
                  <img src="{{ image | product_img_url: '1024x' }}" alt="{{ image.alt | escape }}" />
                </a>
              </div>
              {% endfor %}
            </div>
            <div class="swiper-button-prev">{% include 'svg-chevron-left-light' %}</div>
            <div class="swiper-button-next">{% include 'svg-chevron-right-light' %}</div>
          </div>
          <div class="gallery-thumbs">
            {% for image in product.images %}
            <a href="#"><img src="{{ image | product_img_url: '1024x' }}" alt="{{ image.alt | escape }}" /></a>
            {% endfor %}
          </div>
        </div><!-- /.product-gallery -->

0 Likes
Highlighted
Shopify Expert
2684 67 831

Hi Margot, 

you may try the following:

1. Make a backup copy of your theme by clicking the 3-dot button and selecting Duplicate.

2. Open your theme.js (or theme.js.liquid) Asset,   find  /// Product gallery  line (approx ~1298) and the following code below (starts at ~1310):

 var galleryTop = new Swiper($top, {
          nextButton: $top.find('.swiper-button-next'),
          prevButton: $top.find('.swiper-button-prev'),
          slidesPerView: 'auto',
          spaceBetween: 10,
          speed: 500,
          autoHeight: $(window).width() < 768, // if true, adjusts the height of the gallery to match the current image
          initialSlide: initial
        });

You should change  slidesPerView: 'auto', to be slidesPerView:  1,

and autoHeight: $(window).width() < 768,  to be autoHeight: false, 

3. Save, try, report.

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
0 Likes
Highlighted
New Member
5 0 0

It worked perfectly, thank you so much :) Because the width is different between the photos, is there any way to center photos? Right now, the first product photo is showing up aligned to the left side because it has a narrower width than the other photos in the same slideshow. In any case, I really appreciate your help, it fixed a big headache for me  :) 

0 Likes
Highlighted
Shopify Expert
2684 67 831

Margot, 

add this rule to the bottom of your styles.scss.liquid  Asset:

/* center align images in slideshow on product page */
.product-gallery .swiper-slide {
    text-align: center;
}

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
0 Likes
Highlighted
New Member
5 0 0

Works perfectly, thank you!

0 Likes
Highlighted
New Member
2 0 0

Can you tell me what I'm doing wrong?

slidesPerView: 'auto', to slidesPerView:  1, worked great!

autoHeight: $(window).width() < 768,  to be autoHeight: false, made 2 images display at the same time and the arrows to go back and forth stopped working.

And

/* center align images in slideshow on product page */
.product-gallery .swiper-slide {    text-align: center;
}

Made no difference on the page :(

The web site is sportsheadquarters.ca
I've been at this for hours and I can't get it.

Any help would be greatly appreciated.
Thank-you!

0 Likes
Highlighted
New Member
2 0 0

@Sbaum wrote:

Can you tell me what I'm doing wrong?

slidesPerView: 'auto', to slidesPerView:  1, worked great!

autoHeight: $(window).width() < 768,  to be autoHeight: false, made 2 images display at the same time and the arrows to go back and forth stopped working.

And

/* center align images in slideshow on product page */
.product-gallery .swiper-slide {    text-align: center;
}

Made no difference on the page

The web site is sportsheadquarters.ca
I've been at this for hours and I can't get it.

Any help would be greatly appreciated.
Thank-you!


this don't worked for me too  

any ideas?

0 Likes
Highlighted
New Member
2 0 0

@tim wrote:

Margot, 

add this rule to the bottom of your styles.scss.liquid  Asset:

/* center align images in slideshow on product page */
.product-gallery .swiper-slide {
    text-align: center;
}

 


hi, i cant make this work 

 

can someone help me? here is my site zeroonemoto.com 

0 Likes