Add thumbnails functionality

[ghost]

I love your awesome plugin. I already started using it in a project. It works really well for banner slider. But there also is a product page where i have a thumbnail slider: http://i.imgur.com/htTb2Kj.jpg and i have to consider other plugins(which i think are not as good as yours) to implement it.

So i think it'd be really great if you added this functionality. Or maybe you know a way for me to do this now?

Thanks.

[kenwheeler]

A great way to do this, is to use the carousel for the thumbnails. On each slide div, add a data attribute of the full size image. Then on click, change the big picture based upon the thumbnails data-lrg-img attribute.

[ghost]

Oh, thank you! I'll try that.

[EBII]

using Slider Syncing it is ok for me

[totemusik]

This is my solution.
May it helps.

This works with several usage of the same slick-slider on one page.
The HTML is with smarty, so you have to change for your purpose. :)

JavaScript

 function showSliderImage() {
        $('.slick-slider-image').on('click', function () {
            var sliderImagePath = $(this).find('img').attr('src');
            var sliderImageId = $(this).find('img').attr('data-lrg-img');

            $('#' + sliderImageId).attr('src', sliderImagePath);
        });
    }

    showSliderImage();

HTML

{assign var='randomKey' value=1|rand:299}

<div class="slick-slider-image-large-container">
    {if $images}
        <img src="{$images[0].image.url}" class="slick-slider-image" alt="" id="{$randomKey}">
    {/if}
</div>

<div class="slick-slider">
    {if $images}
        {foreach from=$images item=item key=key}
            <div class="slick-slider-image">
                <img src="{$item.image.url}" alt="" data-lrg-img="{$randomKey}">
            </div>
        {/foreach}
    {/if}
</div>