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

编程问答 2022-08-11

问题描述

我面临的问题是滑块图像没有响应...我不知道我在做什么错，我遵循了slick.js网页上的演示说明。

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

我的问题图片： 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;
  }

解决方法

Slick是一个非常不错的滑块，但是到了2020年，即使开发人员多年来也不使用它了。我的建议是停止使用Slick和JQuery。

htmljavascriptjqueryslick.js