Shopify Theme – Need to add dots and arrows for already made products page

  css, html, javascript, shopify, slick.js

I have a products page that already uses slick to make a standard product page with a few image and the ability to click between them.
I’m new to shopify and I can get the dots to show with custom coding but I get no functionality through them. I’m wondering if by posting the code here someone may be able to point me in the right direction.

<div
    id="ProductThumbs-{{ section_id }}"
    class="product__thumbs product__thumbs--{{ thumbnail_position }} small--hide{% if product.media.size == 1 %} medium-up--hide{% endif %}"
    data-position="{{ thumbnail_position }}"
    data-product-thumbs
    data-aos>
    {%- if product_image_type == 'stacked' -%}
      <div class="product__thumbs-sticky">
    {%- endif -%}
      {%- if product.media.size > 1 -%}
        {%- for media in product.media -%}
          {%- liquid
            assign image_set = false
            assign image_set_group = ''
            if media.alt contains '#'
              assign image_set_full = media.alt | split: '#' | last
              if image_set_full contains '_'
                assign image_set = true
                assign image_set_group = image_set_full | split: '_' | first
              endif
            endif
          -%}
          <div class="product__thumb-item{% if product_image_type == 'stacked' and forloop.index == 1 %} thumb--current{% endif %}"
            data-product-thumb-item
            data-index="{{ forloop.index0 }}"
            {% if image_set %}
              data-set-name="{{image_set_group}}"
              data-group="{{image_set_full}}"
            {% else %}
              data-group
            {% endif %}>
            <a
              href="{{ media.preview_image | img_url: product_zoom_size }}"
              class="image-wrap product__thumb js-no-transition"
              data-id="{{ media.id }}"
              data-index="{{ forloop.index0 }}"
              data-product-thumb
              style="height: 0; padding-bottom: {{ 100 | divided_by: media.preview_image.aspect_ratio }}%;">
              {%- if media.media_type == 'video' or media.media_type == 'external_video' -%}
                <span class="product__thumb-icon">
                  <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-play" viewBox="18.24 17.35 24.52 28.3"><path fill="#323232" d="M22.1 19.151v25.5l20.4-13.489-20.4-12.011z"/></svg>
                </span>
              {%- endif -%}
              {%- if media.media_type == 'model' -%}
                <span class="product__thumb-icon">
                  <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-3d" viewBox="18.24 17.35 24.52 28.3"><path fill="#3A3A3A" d="M30.5 17.35l-12.26 7.07v14.16l12.26 7.07 12.26-7.08V24.42L30.5 17.35zM20.24 37.42V25.58l10.26-5.93 10.13 5.85-10.13 5.88v12l-10.26-5.96z"/></svg>
                </span>
              {%- endif -%}

              {%- if force_jpg -%}
                {%- assign img_url = media.preview_image | img_url: '1x1', format: 'jpg' | replace: '_1x1.', '_{width}x.' -%}
              {%- else -%}
                {%- assign img_url = media.preview_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
              {%- endif -%}

              <img class="lazyload"
                  data-src="{{ img_url }}"
                  data-widths="[120, 360, 540, 750]"
                  data-aspectratio="{{ image.aspect_ratio }}"
                  data-sizes="auto"
                  alt="{{ media.alt | escape }}">
              <noscript>
                <img class="lazyloaded" src="{{ media.preview_image | img_url: '180x' }}" alt="{{ media.alt | escape }}">
              </noscript>
            </a>
          </div>
        {%- endfor -%}
      {%- endif -%}
    {%- if product_image_type == 'stacked' -%}
      </div>
    {%- endif -%}

This code makes the Thumbnail images work so that I can click them and they appear centrally as the main image. How would I go about adding the dots and arrows so that they are interactive and work with perfectly aligned with the functionality I already have.

Any help is really appreciated!

Source: Ask Javascript Questions

LEAVE A COMMENT