Product image carousel

Highlighted
Excursionist
20 1 2

Hello all. 

 

I am trying to implement a slideshow/carousel into our product images on our product pages so images auto play when viewed, however not being overly adept with coding I'm somewhat stuck? 

 

I have checked the product template liquid file and believe the below code is what needs to be changed/altered for this affect to work. I had found a thread explaining how to do this, and although it partly worked it wasn't quite there and resulted in pushing all content to the left of the page.

 

I can see that we have the flexslider extension which is currently being used for the heroSlider on our home page (I am not sure if this would help with any implementation).

 

I have added an example of what we are trying to achieve, as well as the code from our product template liquid file that I believe would need changing.

 

Any help would be greatly appreciated.

 

Many thanks

 

Paul

 

SOMETHING LIKE THISSOMETHING LIKE THIS

 

 

<div class="grid-item large--two-fifths">
<div class="grid">
<div class="grid-item large--eleven-twelfths text-center">
<div class="product-photo-container" id="productPhotoContainer-{{ section.id }}">
{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
{% for image in product.images %}
{% capture img_wrapper_id %}productPhotoWrapper-{{ section.id }}-{{ image.id }}{% endcapture %}
{% capture img_id %}productPhotoImg-{{ section.id }}-{{ image.id }}{% endcapture %}

<div class="lazyload__image-wrapper no-js product__image-wrapper{% unless image == featured_image %} hide{% endunless %}" id="{{ img_wrapper_id }}" style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;" data-image-id="{{ image.id }}">
{%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<img id="{{ img_id }}"
{% if forloop.first == true %}
src="{{ featured_image | img_url: '300x300' }}"
{% endif %}
class="lazyload no-js lazypreload"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image.alt | escape }}"
{% if section.settings.product_image_zoom_enable %} data-zoom="{{ image | img_url: '400x400', scale: 2 }}"{% endif %}>
</div>
{% if forloop.first == true %}
<noscript>
<img src="{{ image | img_url: '580x' }}"
srcset="{{ image | img_url: '580x' }} 1x, {{ image | img_url: '580x', scale: 2 }} 2x"
alt="{{ image.alt }}" style="opacity:1;">
</noscript>
{% endif %}
{% endfor %}
</div>

{% if product.images.size > 1 %}
<ul class="product-photo-thumbs grid-uniform" id="productThumbs-{{ section.id }}">

{% for image in product.images %}
<li class="grid-item medium-down--one-quarter large--one-quarter">
<a href="{{ image.src | img_url: '1024x1024', scale: 2 }}" class="product-photo-thumb product-photo-thumb-{{ section.id }}" data-image-id="{{ image.id }}">
<img src="{{ image.src | img_url: 'compact' }}" alt="{{ image.alt | escape }}">
</a>
</li>
{% endfor %}

</ul>
{% endif %}

</div>
</div>
</div>

0 Likes
Highlighted
Excursionist
20 1 2

Update, this is the code I had previously found - 

 

 Place the following code right above the </head> tag in Theme.liquid

<link rel="stylesheet" href="flexslider.css" type="text/css">
  <script src="jquery.flexslider.js"></script>
  
  <script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider();
  });
</script>

 

2. In Product-Templete.liquid, replace this ...

<div class="product-photo-container" id="productPhotoContainer-{{ section.id }}">

         {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

          {% for image in product.images %}

            {% capture img_wrapper_id %}productPhotoWrapper-{{ section.id }}-{{ image.id }}{% endcapture %}

            {% capture img_id %}productPhotoImg-{{ section.id }}-{{ image.id }}{% endcapture %}

 

            <div class="lazyload__image-wrapper no-js product__image-wrapper{% unless image == featured_image %} hide{% endunless %}" id="{{ img_wrapper_id }}" style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;" data-image-id="{{ image.id }}">

              {%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

                <img id="{{ img_id }}"

                  {% if forloop.first == true %}

                  src="{{ featured_image | img_url: '300x300' }}"

                  {% endif %}

                  class="lazyload no-js lazypreload"

                  data-src="{{ img_url }}"

                  data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"

                  data-aspectratio="{{ image.aspect_ratio }}"

                  data-sizes="auto"

                  alt="{{ image.alt | escape }}"

                  {% if section.settings.product_image_zoom_enable %} data-zoom="{{ image | img_url: '1024x1024', scale: 2 }}"{% endif %}>

            </div>

            {% if forloop.first == true %}

              <noscript>

                <img src="{{ image | img_url: '580x' }}"

                  srcset="{{ image | img_url: '580x' }} 1x, {{ image | img_url: '580x', scale: 2 }} 2x"

                  alt="{{ image.alt }}" style="opacity:1;">

              </noscript>

            {% endif %}

          {% endfor %}

        </div>

 

        {% if product.images.size > 1 %}

          <ul class="product-photo-thumbs grid-uniform" id="productThumbs-{{ section.id }}">

 

            {% for image in product.images %}

              <li class="grid-item medium-down--one-quarter large--one-quarter">

                <a href="{{ image.src | img_url: '1024x1024', scale: 2 }}" class="product-photo-thumb product-photo-thumb-{{ section.id }}" data-image-id="{{ image.id }}">

                  <img src="{{ image.src | img_url: 'compact' }}" alt="{{ image.alt | escape }}">

                </a>

              </li>

            {% endfor %}

 

          </ul>

        {% endif %}

 

      </div>

 

with this..

 

<div id="product-photo-container" id="productPhotoContainer-{{ section.id }}">
 
          <div class="flexslider">
            <ul class="slides">
                  {% for image in product.images %}
                 <li>
                   <center>{{ image | product_img_url: 'original' | img_tag }}</center>
                 </li>
              {% endfor %}
            </ul>
          </div>
        </div>

However, this is the result?

 

Screen Shot 2019-07-05 at 14.11.40.png

 

Whereas it should look like this - 

 

Screen Shot 2019-07-05 at 14.12.14.png

 

0 Likes
Highlighted
New Member
1 0 0

Looks like you're missing a closing </div> tag

0 Likes