Slick Carousel报Failed to load resource等错误如何解决

控制台错误对应解决方法 #

你抛出的6个控制台错误可以分为三类，逐个修复即可：

• 资源找不到（slick.css、slick-theme.css、slick.min.js报错）：HTML中写的slick/文件路径和本地实际存放位置不匹配，核对三个文件的实际存储目录，修改link和script标签的路径为正确相对路径即可。
• URL非法（两个低版本jQuery文件报错）：这两个脚本用了//开头的协议相对路径，本地直接打开HTML文件时浏览器会按file协议解析地址，自然无法加载资源。你已经在前面引入了兼容Slick的jQuery版本，直接删除这两行重复的低版本jQuery引入即可，同时能避免多版本jQuery冲突。
• 语法错误（slider.js第3行报Unexpected token '-'）：代码里的setting-name: setting-value是官方文档的占位示例，不是可运行的有效代码，JS无法识别横杠连接的未定义变量名，直接删掉这段无效的初始化片段即可。

自定义箭头轮播逻辑修正 #

你当前的配置有两个问题：

1. 写在responsive数组里的navigation配置是其他轮播库的参数，Slick不识别。Slick绑定自定义箭头的参数是prevArrow和nextArrow，需要放在初始化配置的根层级，不能写在断点配置里。
2. 你给轮播容器.new-releases-slider-cards写了display:flex样式，会覆盖Slick初始化时自动生成的轮播布局，导致滑动失效，删掉这段样式即可。

修正后的轮播初始化JS代码 #

$(document).ready(function(){
  $('.center').slick({
    centerMode: true,
    centerPadding: '60px',
    slidesToShow: 3,
    arrows: true,
    prevArrow: $('.left-arrow'),
    nextArrow: $('.right-arrow'),
    responsive: [
      {
        breakpoint: 768,
        settings: {
          arrows: false,
          centerMode: true,
          centerPadding: '40px',
          slidesToShow: 3
        }
      },
      {
        breakpoint: 480,
        settings: {
          arrows: false,
          centerMode: true,
          centerPadding: '40px',
          slidesToShow: 1
        }
      }
    ]
  });
});

需要删除的冲突CSS样式 #

.new-releases-slider-cards {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 4rem;
}

所有修改完成后刷新页面，轮播即可正常通过滑块下方的两个自定义箭头控制切换。

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