How to add Image slider on Product page for Blockshop theme?

[meljason]

Hello guys,

Does anybody have an idea of how to change the default image display to an image slider for the product page on Blockshop? Because the other images take too much space under the featured image.

Currently my code in the for loop is:

{% if product.media.size > 0 %}
        <div class="product-page--media-root">
          <div
            class="product-page--media-container"
            data-media-type="{{ featured_media.media_type }}"
          >
            <div class="modal--root" data-js-class="FrameworkModal">
              {% for media in product.media %}
                {% assign active_media = false %}
                {% if featured_media == media %}
                  {% assign active_media = true %}
                {% endif %}

                {% if section.settings.product-modal-enabled and media.media_type == 'image' %}
                  <div class="modal--link">
                {% endif %}

                  <div
                    class="product-page--media"
                    data-active="{{ active_media }}"
                    data-id="{{ media.id }}"
                    data-media-type="{{ media.media_type }}"
                  >
                    {% case media.media_type %}
                      {% when "image" %}
                        {% render 'framework--image', image: media %}

                      {% when "video" %}
                        {{ media_focus_trigger_opening }}
                        <div
                          class="product-video--root"
                          tabindex="0"
                          data-js-class="ProductVideo"
                          data-loop-enabled="{{ loop_enabled }}"
                          data-type="plyr"
                        >
                          <div
                            class="product-video--container"
                            style="padding-top:
                              {{- 1 | divided_by: media.aspect_ratio | times: 100 -}}%;"
                          >
                            {{ media | video_tag: image_size: "1024x" }}
                          </div>
                        </div>
                        {{ media_focus_trigger_closing }}

                      {% when "external_video" %}
                        {% assign youtube_exists = true %}
                        {{ media_focus_trigger_opening }}
                        <div
                          class="product-video--root"
                          tabindex="0"
                          data-js-class="ProductVideo"
                          data-loop-enabled="{{ loop_enabled }}"
                          data-type="youtube"
                          data-video-id="{{ media.external_id }}"
                        >
                          <div
                            class="product-video--container"
                            style="padding-top:
                              {{- 1 | divided_by: media.aspect_ratio | times: 100 -}}%;"
                          >
                            <div class="product-video" id="{{ media.id }}"></div>
                          </div>
                        </div>
                        {{ media_focus_trigger_closing }}

                      {% when "model" %}
                        {% assign load_3d = true %}
                        {{ media_focus_trigger_opening }}
                        <div
                          class="product-model--root"
                          tabindex="0"
                          data-js-class="ProductModel"
                          style="padding-top:
                            {{- 1 | divided_by: media.preview_image.aspect_ratio | times: 100 -}}%;"
                        >
                          {{
                            media | model_viewer_tag: reveal: 'interaction',
                            toggleable: true,
                            image_size: "1024x"
                          }}
                        </div>
                        {{ media_focus_trigger_closing }}

                      {% else %}
                        {{ media | media_tag }}

                    {% endcase %}
                  </div>

                  {% if section.settings.image-zoom-enabled and media.media_type == 'image' %}
                    <div
                      class="product-page--zoom-image"
                      data-id="{{ media.id }}"
                      data-aspect-ratio="{{ media.aspect_ratio }}"
                    >
                      {% render "framework--image", image: media %}
                    </div>
                  {% endif %}

                {% if section.settings.product-modal-enabled and media.media_type == 'image' %}
                  </div>
                {% endif %}
              {% endfor %}

              {% if section.settings.product-modal-enabled %}
                <div class="product-page--modal-media">
                  {% for media in product.media %}
                    {% if media.media_type == 'image' %}
                      <div class="modal--content">
                        {% render "framework--image", image: media.preview_image %}
                      </div>
                    {% endif %}
                  {% endfor %}
                </div>
              {% endif %}

            </div>
          </div>