Почему не работает этот слайдер?

125
31 мая 2021, 11:20

body { 
  font-family: sans-serif; 
  margin: 0; 
  padding: 0; 
  color: rgb(40, 40, 50); 
} 
 
header { 
  height: 11vh; 
  font-weight: 100; 
} 
 
header :nth-child(1) { 
  font-size: 30px; 
  margin-left: 5%; 
} 
 
header :nth-child(2) { 
  margin-left: 60%; 
  margin-top: -6%; 
  font-size: 33px; 
} 
 
header :nth-child(2) img { 
  padding-right: 1%; 
} 
 
header a { 
  font-size: 18px !important; 
  color: Peru; 
  padding-bottom: 3px; 
  text-decoration: none; 
  border-bottom: 1px solid Peru; 
} 
 
header :nth-child(3) { 
  margin-left: 60%; 
  margin-top: -2%; 
} 
 
span { 
  font-weight: bold; 
} 
 
#section0 { 
  width: 100%; 
  height: 120vh; 
  position: relative; 
  background: url('bezimeni-27_E1v9oDX.png') no-repeat center/cover; 
  color: white; 
  background-attachment: fixed; 
} 
 
#section0 div { 
  text-align: center; 
  font-size: 30px; 
  border: 2px solid white; 
  border-style: double; 
  /* Стиль границы */ 
  border-width: 4px; 
  padding: 40px 40px 80px 40px; 
  width: 40%; 
  margin-left: 27%; 
  position: relative; 
  top: 250px; 
  background: rgba(46, 46, 46, 0.8); 
} 
 
#section0 div h1, 
#section0 div h3 { 
  margin: 0px 
} 
 
#section0 div h3 { 
  font-size: 38px; 
} 
 
#section0 div a { 
  border: 2px solid white; 
  padding: 10px 16px; 
  font-size: 20px; 
  border-radius: 60px; 
  cursor: pointer; 
  color: white; 
  position: relative; 
  top: 30px; 
} 
 
#section0 div a:hover { 
  background: black; 
} 
 
#section1 { 
  margin-top: -4%; 
  text-align: center; 
  height: 100vh; 
} 
 
#section1 .p { 
  padding-top: 5%; 
  font-size: 40px; 
  margin-bottom: 40px; 
} 
 
#section1 .grid { 
  display: grid; 
  grid-template-columns: repeat(3, 280px); 
  font-size: 20px; 
  grid-gap: 20px 60px; 
  margin-left: 14%; 
  margin-top: 8%; 
} 
 
#section1 .grid [alt='0'] { 
  left: 0px; 
  bottom: 25px; 
  z-index: 1; 
} 
 
#section1 .grid [alt='1'] { 
  padding-top: 30%; 
  margin-top: -31%; 
  border-top: 3px solid Peru; 
  left: 0px; 
  bottom: 25px; 
  z-index: 1; 
} 
 
#section1 .grid [alt='2'] { 
  left: 0px; 
  bottom: 25px; 
  z-index: 1; 
} 
 
[alt='0'] { 
  z-index: 0; 
  position: relative; 
  left: 262px; 
  bottom: 500px; 
} 
 
[alt='1'] { 
  z-index: 0; 
  position: relative; 
  left: 478px; 
  bottom: 500px; 
} 
 
[alt='2'] { 
  z-index: 0; 
  position: relative; 
  left: 686px; 
  bottom: 500px; 
} 
 
#section2 { 
  background: silver; 
  height: 90vh; 
} 
 
#section2 .p { 
  text-align: center; 
  padding-top: 10%; 
  font-size: 40px; 
  position: relative; 
} 
 
#section2 .p:before { 
  position: absolute; 
  top: 119%; 
  left: 47%; 
  width: 5%; 
  border-bottom: 3px solid Peru; 
  content: ""; 
} 
 
.main { 
  max-width: 700px; 
  margin: auto; 
}
<!DOCTYPE html> 
<html lang="en" dir="ltr"> 
 
<head> 
  <meta charset="utf-8"> 
  <title></title> 
  <link rel="stylesheet" href="1.css"> 
 
  <link rel="stylesheet" type="text/css" href="slick/slick.css" /> 
  <link rel="stylesheet" type="text/css" href="slick/slick-theme.css" /> 
</head> 
 
<body> 
  <header> 
    <p><span class="span">DESIGN</span>STUDIO</p> 
    <p><img src="0.png" alt="">8 800 000-00-00</p> 
    <p><a href="#">Заказать звонок</a></p> 
  </header> 
  <section id="section0"> 
    <div class=""> 
      <h1>РАЗРАБОТКА</h1> 
      <h1>ФИРМЕННОГО СТИЛЯ:</h1> 
      <h3>от идеи до реализации</h3> 
      <a href="#">↓</a> 
    </div> 
  </section> 
  <section id="section1"> 
    <p class="p">РАБОТАТЬ С НАМИ <span>ЛЕГКО И ПРИЯТНО</span></p> 
 
    <div class="grid"> 
      <div class="div0"> 
        <img src="https://media.lpgenerator.ru/images/245037/bezimeni-3_qwMWvjt.png#size_60x60" alt='0'> 
        <p><span>СОБЛЮДАЕМ СРОКИ</span></p> 
        <p>Разрабатываем лучшие креативные идеи и тщательно следим за соблюдением сроков</p> 
      </div> 
      <div class="div1"> 
        <img src="https://media.lpgenerator.ru/images/245037/bezimeni-2_O1bIEFo.png#size_56x60" alt='1'> 
        <p><span>ТАЛАНТЛИВЫЕ ДИЗАЙНЕРЫ</span></p> 
        <p>Высококвалифицированные профессионалы, которые мыслят ярко и нестандартно</p> 
      </div> 
      <div class="div2"> 
        <img src="https://media.lpgenerator.ru/images/245037/bezimeni-1_OmiiQCk.png#size_60x52" alt='2'> 
        <p><span>ДОСТУПНАЯ ЦЕНА</span></p> 
        <p>Гибкая система расценок позволяет сотрудничать как с крупными компаниями, так и с частными лицами</p> 
      </div> 
    </div> 
  </section> 
  <img src="https://media.lpgenerator.ru/images/245037/bezimeni-7_UJJtw4y.png#size_126x126" alt="0" class=""> 
  <img src="https://media.lpgenerator.ru/images/245037/bezimeni-5_ltDSD24.png#size_126x126" alt="1" class=""> 
  <img src="https://media.lpgenerator.ru/images/245037/bezimeni-6_X9sbs1e.png#size_126x126" alt="2" class=""> 
 
  <section id="section2"> 
    <p class="p">НАШЕ <span>ПОРТФОЛИО</span></p> 
    <div class="main"> 
      <div class="sl"> 
        <div class="slide__slide"> 
          <img src="https://media.lpgenerator.ru/images/245037/bezimeni-14_29JPQGq.png#size_355x355" alt="Картинка слайда 1" class="imgSlide__img"> 
          <div class="sl__text"> 
            <h3 class="sl__zag">Слайд 1</h3> 
            <p class="sl__desc">Описание Слайда N1</p> 
          </div> 
        </div> 
        <div class="slide__slide"> 
          <img src="https://media.lpgenerator.ru/images/245037/bezimeni-15_gu3xAbi.png#size_355x355" alt="Картинка слайда 2" class="imgSlide__img"> 
          <div class="sl__text"> 
            <h3 class="sl__zag">Слайд 2</h3> 
            <p class="sl__desc">Описание Слайда N2</p> 
          </div> 
        </div> 
        <div class="slide__slide"> 
          <img src="https://media.lpgenerator.ru/images/245037/bezimeni-12_2vWLtcK.png#size_355x355" alt="Картинка слайда 3" class="imgSlide__img"> 
          <div class="sl__text"> 
            <h3 class="sl__zag">Слайд 3</h3> 
            <p class="sl__desc">Описание Слайда N3</p> 
          </div> 
        </div> 
        <div class="slide__slide"> 
          <img src="https://media.lpgenerator.ru/images/245037/bezimeni-13_qOo3I8l.png#size_355x355" alt="Картинка слайда 4" class="imgSlide__img"> 
          <div class="sl__text"> 
            <h3 class="sl__zag">Слайд 4</h3> 
            <p class="sl__desc">Описание Слайда N4</p> 
          </div> 
        </div> 
      </div> 
    </div> 
 
  </section> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 
  <script type="text/javascript" src="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> 
  <script> 
    $('.sl').slick({ 
      autoplay: true 
    }) 
  </script> 
</body> 
 
</html>

Как его починить? Вроде всё делал по коду из оф сайта

Answer 1

Я не увидел jquery и как подключил его сразу заработало

Вообще мануалы какого то сомнительного челика использовать не надо так как есть официальный сайт: https://kenwheeler.github.io/slick/

<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" /> 
 
<div class="slider"> 
  <div class="slide__slide"> 
    <img src="https://media.lpgenerator.ru/images/245037/bezimeni-14_29JPQGq.png#size_355x355" alt="Картинка слайда 1" class="imgSlide__img"> 
    <div class="sl__text"> 
      <h3 class="sl__zag">Слайд 1</h3> 
      <p class="sl__desc">Описание Слайда N1</p> 
    </div> 
  </div> 
  <div class="slide__slide"> 
    <img src="https://media.lpgenerator.ru/images/245037/bezimeni-15_gu3xAbi.png#size_355x355" alt="Картинка слайда 2" class="imgSlide__img"> 
    <div class="sl__text"> 
      <h3 class="sl__zag">Слайд 2</h3> 
      <p class="sl__desc">Описание Слайда N2</p> 
    </div> 
  </div> 
  <div class="slide__slide"> 
    <img src="https://media.lpgenerator.ru/images/245037/bezimeni-12_2vWLtcK.png#size_355x355" alt="Картинка слайда 3" class="imgSlide__img"> 
    <div class="sl__text"> 
      <h3 class="sl__zag">Слайд 3</h3> 
      <p class="sl__desc">Описание Слайда N3</p> 
    </div> 
  </div> 
  <div class="slide__slide"> 
    <img src="https://media.lpgenerator.ru/images/245037/bezimeni-13_qOo3I8l.png#size_355x355" alt="Картинка слайда 4" class="imgSlide__img"> 
    <div class="sl__text"> 
      <h3 class="sl__zag">Слайд 4</h3> 
      <p class="sl__desc">Описание Слайда N4</p> 
    </div> 
  </div> 
</div> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 
<script type="text/javascript" src="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> 
<script> 
  $('.slider').slick({ 
    autoplay: true 
  }) 
</script>

READ ALSO
Error: Syntax error, unrecognized expression
javascript

Error: Syntax error, unrecognized expression

Всем здравствуйтеВыскакивает куча ошибок на сайте wordpress

 371
Как показать json данные подгруженные ajax
javascript

Как показать json данные подгруженные ajax

при добавление в бд поста через ajax, отправляю этот пост в json формате, все приходит, но я не могу понять как в divcontainer_box показать его

 77
Почему не определяется объект Promise?
javascript

Почему не определяется объект Promise?

Почему вычисляемое свойство,полученное из Промиса, выдает [object Promise] на самой странице, хотя в консоли 14 (как и должно быть):

 108
Не отображается всплывающая форма
javascript

Не отображается всплывающая форма

Есть всплывающая форма, когда нажимаю на кнопку то форма не открывается, ранее убирал hidden, после форма отображалась корректно, но перестала...

 117