Slick slider Responsive breakpoints not working at 576px

Question

I have implemented a slick slider which works fine in 1200px, but as soon I resize, it breaks down. I need to implement 3 slides in 1200px, 2 slides in 786px and 1 slide in 576px screen with equal space between each slide. When I tried to put a margin between each slide, the first slide, cuts off. Here is my code.

• JQUERY

jQuery('.multiple-items').slick({
        prevArrow: '<button class="image-prev w-30 w-md-40 w-lg-50 h-25 h-lg-50 h-md-40 border-0 bg-bfp-primary position-absolute rotate180"></button>',
        nextArrow: '<button class="image-next w-30 w-md-40 w-lg-50 h-25 h-lg-50 h-md-40 border-0 bg-bfp-primary position-absolute "></button>',
        dots: false,
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3,
        responsive: [
        {
            breakpoint: 1200,
            settings: {
                slidesToShow: 3,
                slidesToScroll: 3,
                infinite: true,
                dots: false,
                mobileFirst: true,
            }
        },
        {
            breakpoint: 768,
            settings: {
                slidesToShow: 3,
                slidesToScroll: 3,
                mobileFirst: true,
            }
        },
        {
            breakpoint: 576,
            settings: {
                slidesToShow: 2,
                slidesToScroll: 1,
                mobileFirst: true,
            }
        }

    ]

});
jQuery('.slick-list').find('.slick-active').addClass('slick-slide-margin');

• PHP

<div class="ml-7 ml-xl-24 mr-0">
    <div class="pt-6.8 pb-9">
        <h2 class="font-inter-medium fz-20 text-theme-blue-dark leading-24">Photo Gallery</h2>
            <div class="multiple-items pt-4" >
                <?php 
                while ($photo_gallery_query->have_posts()) : $photo_gallery_query->the_post();
                        $featured_image_url = get_the_post_thumbnail_url(get_the_ID(),'full');?>
                    <div>
                        <img src="<?php echo $featured_image_url; ?>">
                    </div>
                <?php endwhile; 
                wp_reset_postdata();?>
            </div>
    </div>
</div>

• SASS

.slick-slide-margin {
    @extend .w-270;
    @extend .mr-xl-7;
    @extend .mr-3;
}

Answer 1

Hi @Kuldeep Upreti and welcome to Stackoverflow.

Just to make sure, have you tried to compare your solution to their demos?

http://kenwheeler.github.io/slick/

Also this thread might be helpful,

Slick slider not being responsive when resizing the window

Often, the kind of problem you describe, is pretty easy to solve once you figure it out. Most of the times it's just a minor fix, like a missing configuration, event and so on.

To make it easier to help, you can also set up a demo using a service like CodePen (or any other similar service),

https://codepen.io/

Let us know if you're not being able to solve your problem with these links. :-)