slick.js 中多个项目滑块的响应性问题答案

【问题标题】：Responsivness issue with multiple item slider in slick.jsslick.js 中多个项目滑块的响应性问题
【发布时间】：2020-09-12 14:59:16
【问题描述】：

我面临的问题是滑块图像没有响应...我不知道我做错了什么，我按照 slick.js 网页上的演示说明进行操作。

我想要实现的目标：https://solarsystem.nasa.gov/planets/overview/（滚动到页脚，有一个 3 行星滑块（共 9 张图片），图片有一个 html a 标签，并且图片下方有文字）。

我的问题图片： https://i.stack.imgur.com/H1gWd.png

在调整浏览器大小时查看我想要发生的情况： https://solarsystem.nasa.gov/planets/overview/

也许有用的信息：当我将 img 标签放在没有放在 div 或标签中的情况下，它可以完美地工作......

JS/Jquery：

$('.slider-inner').slick({
    arrows: true,
    infinite: false,
    speed: 300,
    slidesToShow: 3,
    slidesToScroll: 3,
    responsive: [
      {
        breakpoint: 800,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2
        }
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      }
    ]
  });

HTML：

<head>
  <link rel="stylesheet" type="text/css" href="/slick-1.8.1/slick/slick.css">
  <link rel="stylesheet" type="text/css" href="/slick-1.8.1/slick/slick- 
  theme.css"/>
  <link rel="stylesheet" href="style.css" />
</head>

<footer>

       <h2>More Locations</h2>
        <div class="slider-inner">

          <div class="slider-item">
            <a href="jupiter.html">
              <img src="../img/slide1.png">
            </a>
          </div>

          <div class="slider-item">
            <a href="earth.html">
              <img src="../img/slide2.png">
            </a>
          </div>

          <div class="slider-item">
            <a href="mercury.html">
              <img src="../img/slide3.png">
            </a>
          </div>

          <div class="slider-item">
            <a href="mars.html">
              <img src="../img/slide4.png">
            </a>
          </div>

          <div class="slider-item">
            <a href="venus.html">
              <img src="../img/slide5.png">
            </a>
          </div>

          <div class="slider-item">
            <a href="saturn.html">
              <img src="../img/slide6.png">
            </a>
          </div>

          <div class="slider-item">
            <a href="uranus.html">
              <img src="../img/slide7.png">
            </a>
          </div>

          <div class="slider-item">
            <a href="neptune.html">
              <img src="../img/slide8.png">
            </a>
          </div>

          <div class="slider-item">
            <a href="moon.html">
              <img src="../img/slide9.png">
            </a>
          </div>

      </div>
</footer>


  <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script type="text/javascript" src="/slick-1.8.1/slick/slick.min.js"></script>

CSS：

  footer {
    padding-top: 10%;
    margin-top: 10%;
    margin-left: 10%;
    margin-right: 10%;
    font-family: 'Gayathri', sans-serif;
  }

  footer h2 {
    font-family: 'Source Sans Pro', sans-serif;
    color: white;
    text-align: center;
    font-size: 40px;
  }

【问题讨论】：

标签： javascript html jquery css slick.js

【解决方案1】：

Slick 是一个非常不错的滑块，但现在是 2020 年，即使是开发人员也多年来不再使用它做任何事情。我的建议是停止使用 Slick 和 JQuery。

【讨论】：

好的，我知道，但我正在用 Vanilla JS 做我的第一个更大的项目，所以我认为 slick 适合...无论如何，谢谢你的建议。