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>
Что я не так делаю? Слайдер не хочет запускаться. Помогите пожалуйста.