Implementing Slick JS into Shopify

Question

I'm trying to implement Slick JS on my product page on shopify. It's working great except instead of only having 1 product image that you can scroll through, it displays three that you can scroll through. Is there any way to fix this? I've included the code and a picture of what's happening. This is my code inside product-template.liquid:

   <script type='text/javascript' src='https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js'></script>
 <script type='text/javascript'>
     $(function(){
       $('div.adsurf_slickslide_container').slick({
         dots: true,
         infinite: true,
         speed: 300,
         slidesToShow: 1,
         adaptiveHeight: true
       });

       $(document).on('change', 'select.single-option-selector', function(){
         var customVal = $(this).val();

         var hittedIndex = $('span img#' + customVal).data('index');
         console.log('span img[addata=' + customVal + ']');

         if(hittedIndex != undefined)
             $('div.adsurf_slickslide_container').slick('slickGoTo', hittedIndex);
       });
     });   </script>



      <div class="grid product-single">
     <div class="grid__item product-single__photos {{ product_image_width }}{% if section.settings.image_size == 'full' %}
 product-single__photos--full{% endif %}">
       {%- assign featured_image = product.selected_or_first_available_variant.featured_image | default:
 product.featured_image -%}
       {% for image in product.images %}
         {% capture img_id %}FeaturedImage-{{ section.id }}-{{ image.id }}{% endcapture %}
         {% capture img_class %}product-featured-img{% endcapture %}
         {% capture zoom_img_id %}FeaturedImageZoom-{{ section.id }}-{{ image.id }}{% endcapture %}
         {% capture img_wrapper_id %}{{ zoom_img_id }}-wrapper{% endcapture %}
         {%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

         {% include 'image-style' with small_style: true, width: height, height: height, wrapper_id: img_wrapper_id, img_id: img_id %}

      <div class="adsurf_slickslide_container" role='toolbar'>
             {% assign index = 0 %}
             {% if product.images.size > 1 %}
               {% for image in product.images %}
                   {% assign index = index | plus: 1 %}

             <span class="slide" data-index="{{ index }}" data-variant-img="{{ image.id }}">
               <img data-advar="{{ product.options_with_values | escape  }}" src="{{ image | img_url: '1024x1024' }}" alt="{{ image.alt |
 escape }}">
             </span>

       {% endfor %}
     {% endif %}
         </div>
       {% endfor %}

picture Thanks, Ryan

Zoltan TM Zoltan TM · Accepted Answer · 2018-08-30T09:54:50

Your slider has not initiated, at least from your image.

Please use Developer tools (Ctrl+F12 on Win, Cmd+Alt+C on Mac). Choose the "Console tab". Paste here what it says so we see what happens in your JS.

Would you please reinsert the code with readable indentation?

Check their site and look for "reinitiate" and "variable width".

$('.variable-width').slick({
  infinite: true,
  variableWidth: true
});

Implementing Slick JS into Shopify

1 Answers