JSFiddle - React, Tailwind, and code Playground

JavaScript

var width = window.innerWidth || document.body.clientWidth;
var $slick = $('.js-slider-gift');


function initSlick() {
    if (width < 960) {
        $slick.slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            infinite: false,
            mobileFirst: true,
            arrows: false,
            variableWidth: true,
            responsive: [{
                breakpoint: 599,
                settings: {
                    slidesToShow: 2
                }
            }]
        });
    } else {
        $slick.slick({
            rows: 2,
            slidesToShow: 3,
            slidesToScroll: 3,
            arrows: true,
            infinite: false,
            dots: false,
            prevArrow: '<a href="javascript:void();" class="b-product-carousel-gift__arrow b-product-carousel-gift__arrow--prev carousel-control left"></a>',
            nextArrow: '<a href="javascript:void();" class="b-product-carousel-gift__arrow b-product-carousel-gift__arrow--next carousel-control right"></a>',
            responsive: [{
                breakpoint: 1300,
                settings: {
                    rows: 2,
                    slidesToShow: 2,
                    slidesToScroll: 2,
                }
            }]
        });
    };
};


$(window).resize(function() {
    $('.js-slider-gift').slick('resize');
});

$(document).ready(function() {
    initSlick();
});