使用Slick Slider时图片无法按预期对齐问题求助

问题根源 #

你的代码存在几个冲突点导致异常：

• 手动给.slider-villes添加display:flex和overflow-x:scroll，与Slick自身的容器样式相互干扰
• 同时引入多个jQuery版本（3.6.0和1.11.0），引发脚本冲突
• 用!important强制设置图片宽度，破坏了Slick的布局计算逻辑
• variableWidth: true配置未配合正确的容器宽度控制，导致排列混乱

修复步骤及代码调整 #

1. 清理重复脚本

移除旧版本jQuery及迁移插件，只保留一个兼容版本：

<!-- 仅保留这一个jQuery引入，删除下方的1.11.0和migrate脚本 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

2. 修改Slick初始化配置

删除variableWidth: true，改用slidesToShow控制同屏显示数量，spaceBetween设置图片间距，按需关闭无限滚动：

$(document).ready(function() {
    $('.slider-villes').slick({
        infinite: false, // 不需要循环可设为false，避免首尾重复
        cssEase: 'linear',
        swipe: true,
        arrows: true,
        slidesToShow: 5, // 同屏显示5张，可按需调整
        slidesToScroll: 1, // 每次滑动1张
        spaceBetween: 0 // 设为0实现紧凑排列，需要间距填对应px数值
    });
});

3. 修正CSS样式

删除.slider-villes的flex和滚动样式，调整图片让它填满每个slide容器：

/* 删除原有的display:flex和overflow-x:scroll */
.slider-villes {
    /* 可选：添加容器居中或最大宽度样式，如max-width: 1200px; margin: 0 auto; */
}

.slider-villes img {
    width: 100%; /* 让图片填满slide，配合slidesToShow控制显示宽度 */
    height: auto; /* 保持图片比例，避免变形 */
    object-fit: cover;
}

4. 图片包裹容器（可选优化）

给每张图片包裹div容器，更精准控制slide尺寸：

<div class="slider-villes">
    <div class="slide-item"><img src="images/accueil/paris-1772x900.jpg" alt="paris"></div>
    <div class="slide-item"><img src="images/accueil/nice-1772x900.jpg" alt="nice"></div>
    <!-- 其余图片同理 -->
</div>

对应CSS补充：

.slide-item {
    width: 20%; /* 与slidesToShow:5对应，100%/5=20% */
}
.slide-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

完整修改后代码示例 #

HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hestia - Accueil</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/slick.css"/>
    <link rel="stylesheet" type="text/css" href="css/slick-theme.css"/>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>

    <!--Slick slider-->
    <div class="slider-villes">
        <div class="slide-item"><img src="images/accueil/paris-1772x900.jpg" alt="paris"></div>
        <div class="slide-item"><img src="images/accueil/nice-1772x900.jpg" alt="nice"></div>
        <div class="slide-item"><img src="images/accueil/marseille-1772x900.jpg" alt="marseille"></div>
        <div class="slide-item"><img src="images/accueil/lyon-1772x900.jpg" alt="lyon"></div>
        <div class="slide-item"><img src="images/accueil/bordeaux-1772x900.jpg" alt="bordeaux"></div>
        <div class="slide-item"><img src="images/accueil/ajaccio-1772x900.jpg" alt="ajaccio"></div>
        <div class="slide-item"><img src="images/accueil/toulouse-1772x900.jpg" alt="toulouse"></div>
    </div>
    <!--Slick slider-->
    
    <!--Scripts-->
    <script type="text/javascript" src="slick/slick.min.js"></script>
    <script type="text/javascript" src="js/slick.js" ></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('.slider-villes').slick({
                infinite: false,
                cssEase: 'linear',
                swipe: true,
                arrows: true,
                slidesToShow: 5,
                slidesToScroll: 1,
                spaceBetween: 0
             });
        });
    </script>
    <!--Scripts-->
</body>
</html>

CSS（style.css）

.slider-villes {
    max-width: 1200px;
    margin: 0 auto; /* 容器居中，可选 */
}

.slide-item {
    width: 20%;
}

.slide-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

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