Слайдер-слайдер Отзывчивые точки останова не работают на 576px

Question

Я реализовал скользкий слайдер, который отлично работает в 1200px, но, как только я изменяю размер, он ломается. Мне нужно реализовать 3 слайда в 1200 пикселей, 2 слайда в 786 пикселей и 1 слайд на экране 576 пикселей с равным пространством между каждым слайдом. Когда я пытался поместить поле между каждым слайдом, первый слайд обрезался. Вот мой код.

• 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

Привет @Kuldeep Upreti и добро пожаловать в Stackoverflow.

Просто чтобы убедиться, вы пытались сравнить свое решение с их демонстрациями?

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

Также эта ветка может быть полезна,

Слайдер-слайдер не реагирует на изменение размера окна

Часто проблема, которую вы описываете, довольно легко решить, как только вы поймете это. В большинстве случаев это просто незначительное исправление, например отсутствующая конфигурация, событие и т. Д.

Чтобы упростить помощь, вы также можете настроить демонстрацию, используя такой сервис, как CodePen (или любой другой подобный service),

https://codepen.io/

Сообщите нам, если вам не удастся решить вашу проблему с помощью этих ссылок. : -)