const $slickSliderBlock = $('.slick-slider-block');

function changeSliderContentHeights() {
    const $slickSliderContent = $('.slick-slider-content');
    const width = $slickSliderContent.outerWidth();
    const height = Math.floor(width * 1.333);
    $slickSliderContent.css('height', height + 'px');
}

$slickSliderBlock.on('init', function (){
    changeSliderContentHeights();
});

$slickSliderBlock.on('breakpoint', function (){
    changeSliderContentHeights();
});

$slickSliderBlock.slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    swipeToSlide: true,
    infinite: false,
    prevArrow: '<img class="custom-arrow prev" src="{{ 'arrow-prev.svg' | asset_url }}" alt="prev">',
    nextArrow: '<img class="custom-arrow next" src="{{ 'arrow-next.svg' | asset_url }}" alt="next">',
    responsive: [
        {
            breakpoint: 768,
            settings: {
                slidesToShow: 2
            }
        }
   ]
});