@Perflex_er

Не работает Slick-slider, как починить?

632b09a304526387096594.jpeg

Пытался подключить slick-slider к макету , однако консоль выдает такую ошибку(скриншот вверху).Первый раз пробывал писать на препроцессорах ,но к сожалению код загрузить не могу, но ссылку на архив оставил внизу. Буду рад любой помощи. Заранее спасибо!

spoiler
$(function(){
  $('.head__slider').slick({
    dots: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    responsive: [
      {
        breakpoint: 1024,
        settings: {

        }
      },
      {
        breakpoint: 600,
        settings: {

        }
      },
      {
        breakpoint: 480,
        settings: {

        }
      }
    ]
  });
});


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="../libs/slick-slider/slick.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <header class="header">
    <div class="container">
      <div class="header__inner">
        <div class="logo">
          <a href="" class="logo__link">
            <img class="logo__link-img" src="images/logo.png" alt="">
          </a>
        </div>
        <nav class="menu">
          <button class="menu__btn"></button>
        </nav>
      </div>
    </div>
  </header>
  <section class="head">
    <div class="head__slider">
      <div class="head__slider-item">
        <h3 class="head__slider-title">МЫСЛИ ГЛОБАЛЬНО</h3>
      </div>
      <div class="head__slider-item">
        <h3 class="head__slider-title">МЫСЛИ ГЛОБАЛЬНО</h3>
      </div>
      <div class="head__slider-item">
        <h3 class="head__slider-title">МЫСЛИ ГЛОБАЛЬНО</h3>
      </div>
    </div>
  </section>
   <script src="js/main.js"></script>
   <script src="libs/slick-slider/slick.min.js"></script>
</body>
</html>


@font-face {
  font-family: "Roboto-Regular";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/Roboto-Regular.woff2") format("woff2"), url("../fonts/Roboto-Regular.woff") format("woff");
}
@font-face {
  font-family: "Roboto-Medium";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/Roboto-Medium.woff2") format("woff2"), url("../fonts/Roboto-Medium.woff") format("woff");
}
@font-face {
  font-family: "RobotoCondensed-Bold";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/RobotoCondensed-Bold.woff2") format("woff2"), url("../fonts/RobotoCondensed-Bold.woff") format("woff");
}
@font-face {
  font-family: "RobotoCondensed-Regular";
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/RobotoCondensed-Regular.woff2") format("woff2"), url("../fonts/RobotoCondensed-Regular.woff") format("woff");
}
@font-face {
  font-family: "Dosis-Medium";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/Dosis-Medium.woff2") format("woff2"), url("../fonts/Dosis-Medium.woff") format("woff");
}
@font-face {
  font-family: "Dosis-Light";
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/Dosis-Light.woff2") format("woff2"), url("../fonts/Dosis-Light.woff") format("woff");
}
html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  min-width: 320px;
  overflow-x: hidden;
  font-family: "Roboto-Regular", "Arial";
  font-weight: 400;
  font-size: 16px;
  line-height: 18px;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
}

.container {
  padding: 0 20px;
}

@media (min-width: 640px) {
  .container {
    padding: 0 30px;
  }
}
@media (min-width: 768px) {
  .container {
    padding: 0 40px;
  }
}
@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
    margin: 0 auto;
  }
}
@media (min-width: 1440px) {
  .container {
    max-width: 1320px;
  }
}
.header {
  background-color: #2B4074;
}
.header__inner {
  min-height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media (min-width: 640px) {
  .header__inner {
    min-height: 100px;
  }
}
.logo__link {
  margin-left: 8px;
}

@media (min-width: 768px) {
  .logo__link {
    margin-left: 14px;
  }
}
@media (min-width: 1024px) {
  .logo__link {
    margin-left: 0px;
  }
}
.menu__btn {
  width: 40px;
  height: 40px;
  border-radius: 3px;
  background-color: #fff;
  border: none;
  position: relative;
}
.menu__btn::after {
  content: "";
  width: 12px;
  height: 2px;
  border-radius: 1px;
  background-color: #2B4074;
  position: absolute;
  top: 15px;
  left: 14px;
  box-shadow: 0 4px 0 0 #2B4074, 0 8px 0 0 #2B4074;
}

.head {
  background-image: url(../images/head__sliderImgjpg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  min-height: 193px;
}

.head__slider {
  background: rgba(33, 33, 33, 0.5);
}
.head__slider-item {
  color: #fff;
  text-align: center;
}
.head__slider-title {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 400;
  font-size: 28px;
  line-height: 28px;
  padding: 36px 0 28px;
}/*# sourceMappingURL=style.css.map */


https://drive.google.com/file/d/1pykzSFjBszr21I94h... - ссылка на полный код т.к. писал на препроцессорах
  • Вопрос задан
  • 45 просмотров
Решения вопроса 1
alexey-m-ukolov
@alexey-m-ukolov Куратор тега JavaScript
Что в сообщении об ошибке "не подключен jQuery" вам конкретно не понятно?
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы