0

window.onload=function(){
  $('.slider__inner').slick({
  autoplay:true,
  autoplaySpeed:1500,
  arrows:true,
  prevArrow:'<button type="button" class="slick-prev"></button>',
  nextArrow:'<button type="button" class="slick-next"></button>',
  centerMode:true,
  slidesToShow:1,
  slidesToScroll:3
  });
};
*,
::after,
::before {
  box-sizing: border-box;
}
a {
  text-decoration: none;
  display: inline-block;
  color: #fff;
  font-family: "Raleway", sans-serif;
  font-weight: 400;
}
ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.container {
  max-width: 1210px;
  margin: 0 auto;
  padding: 0px 15px;
}
body {
  font-family: "Josefin Sans", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 16px;
  color: #000;
  padding: 0;
  margin: 0;
}
p {
  font-family: "Josefin Sans", sans-serif;
  font-weight: 400;
  color: #fff;
  font-size: 18px;
  line-height: 24px;
  margin: 0;
  padding: 0;
}
.menu {
  padding-top: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.menu a {
  padding-left: 30px;
  padding-bottom: 30px;
}
.menu a:hover,
.menu a:focus a::before {
  font-weight: 600;
  transition: all .5s ease;
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  color: #F8E74B;
  font-size: 20px;
}
.header {
  display: flex;
  align-items: center;
  background: linear-gradient(#9d05ac, #ea3e8f);
}
.slider {
  position: relative;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 802px;
  margin: 0;
}
.slider__inner {
  position: relative;
  text-align: center;
  align-items: center;
  padding: 0;
}
.slide img{
width: 400px;
height: 400px;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/fonts.css" />
    <link rel="stylesheet" href="css/media.css" />
    <link rel="stylesheet" href="css/slick.css" />
    <link rel="stylesheet" href="css/slick-theme.css" />
    <link rel="stylesheet" href="css/jquery.fancybox.min.css" />
    <link rel="stylesheet" href="css/style.css" />
    <title>Site</title>
  </head>

  <body>
    <section class="header">
      <div class="container">
        <div class="header__inner">
          <div class="menu">
            <ul>
              <li><a href="#">Main</a></li>
            </ul>
            <ul>
              <li><a href="#">Main</a></li>
            </ul>
            <ul>
              <li><a href="#">Main</a></li>
            </ul>
            <ul>
              <li><a href="#">Main</a></li>
            </ul>
            <ul>
              <li><a href="#">Main</a></li>
            </ul>
            <ul>
              <li><a href="#">Bonuses</a></li>
            </ul>
          </div>
        </div>
      </div>
    </section>
<section class="slider">
  <div class="container">
    <div class="slider__inner">
      <div class="slide"><img src="img/1.jpg" alt=""></div>
      <div class="slide"><img src="img/1.jpg" alt=""></div>
      <div class="slide"><img src="img/1.jpg" alt=""></div>
    </div>
  </div>
</section>

    <script type="text/javascript" src="js/main.js"></script>
    <script type="text/javascript" src="js/slick.js"></script>
    <script type="text/javascript" src="js/slick.min.js"></script>
 <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.1.js"></script>
  </body>
</html>

Что я не так делаю? Слайдер не хочет запускаться. Помогите пожалуйста.

1
  • Пожалуйста, уточните вашу конкретную проблему или приведите более подробную информацию о том, что именно вам нужно. В текущем виде сложно понять, что именно вы спрашиваете. 10 дек 2022 в 13:34

1 ответ 1

0

Порядок подключения скриптов поменяйте

Сначала сторонние библиотеки, потом свой код

window.onload=function(){
  $('.slider__inner').slick({
  autoplay:true,
  autoplaySpeed:1500,
  arrows:true,
  prevArrow:'<button type="button" class="slick-prev"></button>',
  nextArrow:'<button type="button" class="slick-next"></button>',
  centerMode:true,
  slidesToShow:1,
  slidesToScroll:3
  });
};
*,
::after,
::before {
  box-sizing: border-box;
}
a {
  text-decoration: none;
  display: inline-block;
  color: #fff;
  font-family: "Raleway", sans-serif;
  font-weight: 400;
}
ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.container {
  max-width: 1210px;
  margin: 0 auto;
  padding: 0px 15px;
}
body {
  font-family: "Josefin Sans", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 16px;
  color: #000;
  padding: 0;
  margin: 0;
}
p {
  font-family: "Josefin Sans", sans-serif;
  font-weight: 400;
  color: #fff;
  font-size: 18px;
  line-height: 24px;
  margin: 0;
  padding: 0;
}
.menu {
  padding-top: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.menu a {
  padding-left: 30px;
  padding-bottom: 30px;
}
.menu a:hover,
.menu a:focus a::before {
  font-weight: 600;
  transition: all .5s ease;
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  color: #F8E74B;
  font-size: 20px;
}
.header {
  display: flex;
  align-items: center;
  background: linear-gradient(#9d05ac, #ea3e8f);
}
.slider {
  position: relative;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 802px;
  margin: 0;
}
.slider__inner {
  position: relative;
  text-align: center;
  align-items: center;
  padding: 0;
}
.slide img{
width: 400px;
height: 400px;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/fonts.css" />
    <link rel="stylesheet" href="css/media.css" />
    <link rel="stylesheet" href="css/slick.css" />
    <link rel="stylesheet" href="css/slick-theme.css" />
    <link rel="stylesheet" href="css/jquery.fancybox.min.css" />
    <link rel="stylesheet" href="css/style.css" />
    <title>Site</title>
  </head>

  <body>
    <section class="header">
      <div class="container">
        <div class="header__inner">
          <div class="menu">
            <ul>
              <li><a href="#">Main</a></li>
            </ul>
            <ul>
              <li><a href="#">Main</a></li>
            </ul>
            <ul>
              <li><a href="#">Main</a></li>
            </ul>
            <ul>
              <li><a href="#">Main</a></li>
            </ul>
            <ul>
              <li><a href="#">Main</a></li>
            </ul>
            <ul>
              <li><a href="#">Bonuses</a></li>
            </ul>
          </div>
        </div>
      </div>
    </section>
<section class="slider">
  <div class="container">
    <div class="slider__inner">
      <div class="slide"><img src="img/1.jpg" alt=""></div>
      <div class="slide"><img src="img/1.jpg" alt=""></div>
      <div class="slide"><img src="img/1.jpg" alt=""></div>
    </div>
  </div>
</section>


<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  </body>
</html>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.