光滑滑块响应断点在576 at不能工作

Question

我已经实现了一个光滑的滑块，它在1200 it中工作得很好，但我一调整大小，它就坏了。我需要在1200 to中实现3张幻灯片，在786 to中实现2张幻灯片，在576 to屏幕上实现1张幻灯片，每一张幻灯片之间的空间相等。当我试图在每一张幻灯片之间加一个空白时，第一张幻灯片就被切断了。这是我的密码。

• 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

嗨@库尔迪普·乌普雷蒂，欢迎来到斯塔克溢流。

为了确定一下，你有没有试过把你的解决方案和他们的演示进行比较？

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

而且这条线可能会有帮助，

Slick slider not being responsive when resizing the window

通常，你所描述的那种问题，一旦你解决了，就很容易解决。大多数情况下，它只是一个小的修复，比如缺少的配置，事件等等。

为了使帮助更容易，您还可以使用像CodePen这样的服务(或任何其他类似的服务)来设置一个演示，

https://codepen.io/

如果你不能用这些链接解决你的问题，请告诉我们。:-)