I need to add custom class on slick slider when it exceed the slide count (3) on mobile device so i can change padding of slide nav when displayed on mobile device with more then 3 slides. on desktop i am using slidesToShow: maxItems to calculate the items on desktop and show all at once.

here is my slick code.

$('.bundleTitleCarousel').slick({
        slidesToShow: maxItems,
        slidesToScroll: 1,
        accessibility:false,
        draggable: false,
        asNavFor: '#bundle-lp-product-slider',
        dots: false,
        arrows: false,
        infinite: false,
        waitForAnimate: false,
        focusOnSelect: true,
        centerPadding:'0px',
        mobileFirst:true,
        responsive: [
            {
                breakpoint: 767,
                settings: {
                    slidesToShow: maxItems,
                    slidesToScroll: 1
                }
            },
            {
                breakpoint: 320,
                settings: {
                    slidesToShow: 3,
                    slidesToScroll: 1
                }
            }
            // You can unslick at a given breakpoint now by adding:
            // settings: "unslick"
            // instead of a settings object
        ]
    });