Slick Carousel技术问题：幻灯片底部对齐与描述即时切换

一、实现所有幻灯片底部统一对齐 #

问题根源在于非中间幻灯片的description被隐藏，导致info区域高度不一致，进而让幻灯片整体高度不同。通过Flex布局可强制每个幻灯片的结构高度统一，让图片始终固定在底部：

修改CSS中的.slide和.slick-slide样式：

.slick-slide {
    margin: 10px;
    display: flex;
    height: auto;
}
.slide {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.slide .info {
    padding: 10px;
    flex-grow: 1; /* 让info区域自动填充剩余空间，保证图片始终在底部 */
}

这样不管description是否显示，info区域都会占据足够空间，图片始终固定在幻灯片底部，实现所有幻灯片底部对齐。

二、滚动开始时即时切换描述显示状态 #

原代码使用afterChange事件（滚动结束后触发），替换为beforeChange事件（滚动开始时触发），就能在滑动开始时立即切换描述的显示状态：

修改JS中的事件监听部分：

$('.carousel').on('beforeChange', function(event, slick, currentSlide, nextSlide){
    $('.slide').removeClass('center');
    // 提前标记即将成为中心的幻灯片
    $(slick.$slides[nextSlide]).addClass('center');
});

修改后的完整代码 #

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet"/>


<div class="wrapper">
      <div class="carousel">
        <div class="slide">
            <div class="info">
              <div class="title">TITLE 1</div>
              <div class="description">Description for the first slide</div>
            </div>
            <img src="https://picsum.photos/300/200?random=1" alt="Slide 1">
        </div>
        <div class="slide">
            <div class="info">
                <div class="title">TITLE 2</div>
                <div class="description">Description for the second slide</div>
             </div>
            <img src="https://picsum.photos/300/200?random=2" alt="Slide 2">
        </div>
        <div class="slide">
            <div class="info">
                <div class="title">TITLE 3</div>
                <div class="description">Description for the third slide</div>
            </div>
            <img src="https://picsum.photos/300/200?random=3" alt="Slide 3">
        </div>
        <div class="slide">
            <div class="info">
                <div class="title">TITLE 4</div>
                <div class="description">Description for the fourth slide</div>
            </div>
            <img src="https://picsum.photos/300/200?random=4" alt="Slide 4">
        </div>
        <div class="slide">
            <div class="info">
                <div class="title">TITLE 5</div>
                <div class="description">Description for the fifth slide</div>
            </div>
            <img src="https://picsum.photos/300/200?random=5" alt="Slide 5">
        </div>
        <div class="slide">
            <div class="info">
                <div class="title">TITLE 6</div>
                <div class="description">Description for the sixth slide</div>
            </div>
            <img src="https://picsum.photos/300/200?random=6" alt="Slide 6">
        </div>
      </div>
</div>

CSS

html, body {
    background-color: #e74c3c;
}
.wrapper {
    width: 100%;
    padding-top: 20px;
    text-align: center;
}
.carousel {
    width: 90%;
    margin: 0px auto;
}
.slick-slide {
    margin: 10px;
    display: flex;
    height: auto;
}
.slick-slide img {
    width: 100%;
    border-radius: 10px;
}
.slide {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.slide .description {
    display: none;
}
.slide .info {
    padding: 10px;
    flex-grow: 1;
}
.slide.center .info {
    border-radius: 10px 10px 0 0;
    border: 2px solid #fff;
    border-bottom: none;
}
.slide.center .description {
    display: block;
}
.slide.center.slick-slide img{
    border-radius: 0 0 10px 10px;
}

JS

$(document).ready(function(){
    $('.carousel').slick({
        centerMode: true,
        centerPadding: '0px',
        slidesToShow: 3,
        autoplay: true,
        autoplaySpeed: 3000,
        responsive: [
            {
                breakpoint: 768,
                settings: {
                    arrows: false,
                    centerMode: true,
                    centerPadding: '40px',
                    slidesToShow: 1
                }
            },
            {
                breakpoint: 480,
                settings: {
                    arrows: false,
                    centerMode: true,
                    centerPadding: '40px',
                    slidesToShow: 1
                }
            }
        ]
    });
    
    $('.carousel .slick-center').addClass('center');
  
    $('.carousel').on('beforeChange', function(event, slick, currentSlide, nextSlide){
        $('.slide').removeClass('center');
        $(slick.$slides[nextSlide]).addClass('center');
    });
});

内容的提问来源于stack exchange，提问作者Hector