скользящий слайдер синхронизирует миниатюры без выравнивания (на Shopify) - PullRequest
Новая
       13

скользящий слайдер синхронизирует миниатюры без выравнивания (на Shopify)

0 голосов
/ 26 июня 2018

Я установил синхронизированные слайдеры слайдов Slick для изображений продуктов и миниатюр, и все работает нормально, пока вы не используете основное изображение для навигации вместо миниатюр.

Вы можете увидеть проблему здесь: https://monosnap.com/file/2wLtDBErumVnQs8UlA5PtRro8UBQZq

Он работает на Shopify, но я не думаю, что это будет проблемой, это больше связано с центрированием, но я просто не могу понять это!

Любая помощь приветствуется! 

  document.addEventListener("DOMContentLoaded", function(event) { 
    $('.slider-for').slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: true,
      fade: true,
      asNavFor: '.slider-nav'
    });
    $('.slider-nav').slick({
      slidesToShow: 3,
      slidesToScroll: 1,
      asNavFor: '.slider-for',
      dots: false,
      centerMode: true,
      focusOnSelect: true,
      infinite: true
    });
  });


        <div class="slider-for">
          {% for image in product.images %}
          <img src="{{image | img_url: '565x', crop: 'center'}}" title="{{image.alt | default: product.title | escape}}" alt='{{image.alt | default: product.title | escape}}'/>                          
          {% endfor %}
        </div>

        <div class="slider-nav">
          {% for image in product.images %}
          <div>
            <img src="{{image | img_url: '400x'}}" alt="{{image.alt | default: product.title | escape}}" class="product-thumbnails">
          </div>                          
          {% endfor %}
        </div>
...