Dawn Slide Component

Solved
made4Uo
Trailblazer
157 11 41

Hi @shadowsfall118 . You do not need to add javascript code. Just change the product.media.size < 5 in the slider-buttons so the "small-hide" get activated. See the bold code. I updated my code in the website too. Thank you again

 

<section class="page-width">
        <div class="product grid grid--1-col {% if product.media.size > 0 %}grid--2-col-tablet{% else %}product--no-media{% endif %}">
          <div class="grid__item product__media-wrapper">
 
            <div class="slider-container" >
            <a class="skip-to-content-link button visually-hidden" href="#ProductInfo-{{ section.id }}">
            {{ "accessibility.skip_to_product_info" | t }}
            </a>
            <ul class="large-image" id="large-image">
                {%- for media in product.media -%}
 
                <li class="large-image-item product__media-item grid__item slider__slide
                    {% if media.media_type != 'image' %}
                    product__media-item--full{% endif %}"
                    data-media-id="{{ section.id }}-{{ media.id }}">
                    {% render 'product-thumbnail', media: media, position: forloop.index, loop: section.settings.enable_video_looping, modal_id: section.id, xr_button: true %}
                    </li>
                {%- endfor -%}
              
                </ul>
 
      <slider-component >
                <ul class="product-slider-box slider" role="list">
                    {%- for media in product.media -%}
                    <li class="product-slider slider__slide">
                        <img class="slide-image"
                        onclick="newLargeImage(this)"
                        data-thumb-id="{{ section.id }}-{{ media.id }}"
                        src="{{ media.preview_image | img_url: 'large', scale: 4 }}"
                        alt="{{ thumbnailAlt }}">
                    </li>
                {% endfor %}
                </ul>
          <div class="slider-buttons no-js-hidden{% if product.media.size < 2 %}
            small-hide{% endif %}">
            <button type="button" class="slider-button slider-button--prev bigger-slider" name="previous" aria-label="{{ 'accessibility.previous_slide' | t }}">{% render 'icon-caret' %}</button>
              <div class="slider-counter caption">
              <span class="slider-counter--current">1</span>
              <span aria-hidden="true"> / </span>
              <span class="visually-hidden">{{ 'accessibility.of' | t }}</span>
              <span class="slider-counter--total">{% if section.settings.hide_variants %}{{ product.media.size | minus: variant_images.size | plus: 1 }}{% else %}{{ product.media.size }}{% endif %}</span>
              </div>
            <button type="button" class="slider-button slider-button--next bigger-slider" name="next" aria-label="{{ 'accessibility.next_slide' | t }}">{% render 'icon-caret' %}</button>
          </div>
          </slider-component>
      </div>
I do not work with Shopify. I am not looking to be hired or being paid. Just wanted to help.
shadowsfall118
Excursionist
9 0 3

@made4Uo thanks for pointing this out. Although the "small-hide" css class does not seem to do anything on my vanilla (plain) shop. Maybe replace "small-hide" with "visually-hidden"?

OLD:

<div class="slider-buttons {% if product.media.size < 5 %}
small-hide{% endif %}">

 

NEW:

<div class="slider-buttons {% if product.media.size < 5 %}
visually-hidden{% endif %}">
0 Likes
made4Uo
Trailblazer
157 11 41

@shadowsfall118 . If you go to the asset folder and open the base.css folder you see the visually hidden there (see below). This is not really what we want. I was able to find the small-hide and it only works in small screen. We can use 'hidden' instead. I updated my code in the website again. Code should look like this

<div class="slider-buttons {% if product.media.size < 5 %}hidden{% endif %}">

 

 

.visually-hidden {
position: absolute !important;
overflow: hidden;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
clip: rect(0 0 0 0);
word-wrap: normal !important;
}

I do not work with Shopify. I am not looking to be hired or being paid. Just wanted to help.
0 Likes
shadowsfall118
Excursionist
9 0 3

@made4Uo I think this line needs to be 4 not 3.

this.totalPages = sliderItemsToShow.length - this.slidesPerPage + 4;

 

I had a product with 5 images and the last was not showing / could not click the right arrow to reveal it.

0 Likes
made4Uo
Trailblazer
157 11 41

You are right! Thank you

I do not work with Shopify. I am not looking to be hired or being paid. Just wanted to help.
0 Likes
StewartM
Tourist
4 0 1

Thanks both of you for looking into to this so quickly and investigating, its much appreciated. 

 

I know this will help an awful lot of people who are looking to get the same functionality with the theme  

 

Thanks again @made4Uo and @shadowsfall118 

 

 

made4Uo
Trailblazer
157 11 41

No problem at all. Glad to help. Thank you @shadowsfall118 for helping me modify the code

I do not work with Shopify. I am not looking to be hired or being paid. Just wanted to help.
0 Likes
HamishDavisonIC
Excursionist
48 6 24

@made4Uo Could I ask your permission to make a YouTube video using this method? I have people literally begging me to find a solution and I've been looking for a week and finally got it working thanks to your guide

0 Likes
made4Uo
Trailblazer
157 11 41

I did create a YouTube video in my website but due to some code changes, you might not able to follow. I will be creating a YouTube video in a few. Stay tuned. 

I do not work with Shopify. I am not looking to be hired or being paid. Just wanted to help.
0 Likes