jQuery(document).ready(function ($) {

    $('.ipm-product-main-slider').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: true,
        fade: true,
        adaptiveHeight: true,
        draggable: false,
        asNavFor: '.ipm-product-thumb-slider',

        prevArrow: `
            <button type="button" class="ipm-slick-arrow ipm-prev">
                <svg viewBox="0 0 24 24">
                    <path d="M15 18l-6-6 6-6"/>
                </svg>
            </button>
        `,
        nextArrow: `
            <button type="button" class="ipm-slick-arrow ipm-next">
                <svg viewBox="0 0 24 24">
                    <path d="M9 6l6 6-6 6"/>
                </svg>
            </button>
        `
    });

    $('.ipm-product-thumb-slider').slick({
        slidesToShow: 5,
        slidesToScroll: 1,
        asNavFor: '.ipm-product-main-slider',
        focusOnSelect: true,
        arrows: false,
        infinite: false,
        centerMode: true,

        responsive: [
            {
                breakpoint: 1024,
                settings: { slidesToShow: 4 }
            },
            {
                breakpoint: 600,
                settings: { slidesToShow: 3 }
            }
        ]
    });

});
