How to use SlickGoTo show variant image on variant select

Highlighted
New Member
2 0 0

I'm building my own theme using Timber as the basis, and have set up slick slider for product pages. I want to set it up so that choosing a variant will automatically advance the slider to the associated variant image, but I'm not quite sure how to set that up.

 

This is how I have my slider set up (the first slider shows the current slide, while the second slider acts as thumbnail navigation for the first one):

 

<div class="product__images--slider">
        <div class="slider-for">
            {% for image in product.images %}
                <img src="{{ image.src | img_url: '800x800', crop: 'center' }}" alt="{{ image.alt | escape }}" data-variant-id>
            {% endfor %}
        </div>
        <div class="slider-nav">
            {% for image in product.images %}
                <img src="{{ image.src | img_url: '800x800', crop: 'center' }}" alt="{{ image.alt | escape }}" data-variant-id>
            {% endfor %}
        </div>
    </div>

My current slick js:

 

$('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: true,
  fade: true,
  asNavFor: '.slider-nav',
  infinite: true,
  centerMode: true
});
$('.slider-nav').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  dots: false,
  arrows: false,
  centerMode: false,
  focusOnSelect: true,
  infinite: true
});
0 Likes