Блог

Главная - Вопросы по программированию - Проблема с отзывчивостью с несколькими элементами слайдера в slick.js

Проблема с отзывчивостью с несколькими элементами слайдера в slick.js

#javascript #html #jquery #css #slick.js

#javascript #HTML #jquery #css #slick.js

Вопрос:

Проблема, с которой я сталкиваюсь, заключается в том, что изображения слайдера не реагируют… Я понятия не имею, что я делаю не так, я следовал инструкциям из демонстраций на slick.js веб-страница.

Чего я хочу достичь:https://solarsystem.nasa.gov/planets/overview / (прокрутите до нижнего колонтитула, там есть слайдер 3 planet (всего 9 изображений), у изображения есть html-тег, а под изображением есть текст).

Изображение моей проблемы: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;
  }

Ответ №1:

Slick был действительно хорошим слайдером, но сейчас 2020 год, даже разработчик годами ничего с ним не делает. Мой совет — прекратить использование Slick и jQuery.

Комментарии:

1. Хорошо, я знал это, но я делаю свой первый крупный проект на ванильном JS, поэтому я решил, что slick подойдет… В любом случае, спасибо за совет.