网站添加JS Carousel后无法运行，请求技术排查

嘿，我一眼就发现了导致你的logo carousel无法运行的核心问题——jQuery的重复加载和版本选择错误，具体来说：

问题分析 #

• 你先加载了完整版本的jQuery 2.2.0，之后又加载了jQuery 3.2.1的slim（精简）版本。后者会覆盖前者的全局$和jQuery对象，而slim版特意移除了slick carousel运行必需的AJAX模块和动画效果模块，这直接导致slick无法正常初始化。
• 虽然你把slick放在了第一个jQuery之后，但后面的slim版jQuery会冲掉之前的完整版本，等于slick最终拿到的是功能残缺的jQuery环境。

修复后的代码 #

把重复的jQuery移除，确保只加载完整版本的jQuery，并且保持正确的脚本加载顺序（jQuery优先，然后是依赖它的slick、Bootstrap相关脚本）：

<div class="container">
  <section class="customer-logos slider">
    <div class="slide"><img src="img/Mascot_logo.jpg"></div>
    <div class="slide"><img src="img/Mascot_logo.jpg"></div>
    <div class="slide"><img src="img/Mascot_logo.jpg"></div>
    <div class="slide"><img src="img/Mascot_logo.jpg"></div>
    <div class="slide"><img src="img/Mascot_logo.jpg"></div>
    <div class="slide"><img src="img/Mascot_logo.jpg"></div>
    <div class="slide"><img src="img/Mascot_logo.jpg"></div>
    <div class="slide"><img src="img/Mascot_logo.jpg"></div>
  </section>
</div>

<!-- Optional JavaScript -->
<!-- 只加载完整版本的jQuery，放在最前面 -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js" type="text/javascript"></script>
<!-- Slick依赖jQuery，所以紧跟在jQuery之后 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<!-- Bootstrap相关脚本按依赖顺序加载：jQuery -> Popper -> Bootstrap -> MDB -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.5/js/mdb.min.js"></script>

</body>
</html>

额外提醒 #

别忘了添加slick的CSS文件，否则carousel的样式会错乱，在<head>里加上：

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css"/>

另外，确保你已经初始化了slick carousel，需要在slick脚本之后添加初始化代码：

<script type="text/javascript">
  $(document).ready(function(){
    $('.customer-logos').slick({
      slidesToShow: 4,
      slidesToScroll: 1,
      autoplay: true,
      autoplaySpeed: 2000,
      arrows: false,
      dots: false,
      pauseOnHover: false,
      responsive: [{
        breakpoint: 768,
        settings: {
          slidesToShow: 3
        }
      }, {
        breakpoint: 520,
        settings: {
          slidesToShow: 2
        }
      }]
    });
  });
</script>

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