Есть слайдер работающий в который я не знаю как установить auto-play! Пробовал сайты с уже готовым кодом, но я не понимаю JS и поэтому HTML с ним я связать не мог. Что нужно вставить в
$('.autoplay').slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
});
Вот HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="GLAV.css">
</head>
<body>
<div class="menu">
<div class="text_perehod">
<nav>
<ul>
<img src="gold.jpg" style="width:30px; height:28px; ">
<li style="font-size:20px; color:#FFD700;">Golden horseshoe!</li>
<li><a href="#">Главная</a></li>
<li><a href="#">Меню</a></li>
<li><a href="#">Наше расположение</a></li>
<li><a href="#"><img src="icons8-vk.com-filled-32.png"></a></li>
<li><a href="#"><img src="icons8-instagram-32.png"></a></li>
<li><a href="#"><img src="icons8-facebook-32.png"></a></li>
<li><a href="#"><img src="icons8-твиттер-filled-32.png"></a></li>
</ul></nav>
</div>
</div>
<!--
Слайдер в начале
-->
<div class="all" data-autoplay="true">
<input checked="" type="radio" name="respond" id="desktop">
<article id="slider">
<input checked="" type="radio" name="slider" id="switch1">
<input type="radio" name="slider" id="switch2">
<input type="radio" name="slider" id="switch3">
<input type="radio" name="slider" id="switch4">
<input type="radio" name="slider" id="switch5">
<div id="slides">
<div id="overflow">
<div class="image">
<a href=""><article><img src="food-photography-sea-food-close-up-1024x677.jpg"></article></a>
<a href=""><article><img src="personal_502.jpg"></article></a>
<a href=""><article><img src="restoran1.jpg"></article></a>
<a href=""><article><img src="restoran.jpg"></article></a>
<a href=""><article><img src="1418305970.jpg"></article></a>
</div>
</div>
</div>
<div id="controls">
<label for="switch1"></label>
<label for="switch2"></label>
<label for="switch3"></label>
<label for="switch4"></label>
<label for="switch5"></label>
</div>
<div id="active">
<label for="switch1"></label>
<label for="switch2"></label>
<label for="switch3"></label>
<label for="switch4"></label>
<label for="switch5"></label>
</div>
</article>
</div>
</body>
</html>
Вот CSS
body{
background-color:#FFFDD0;
}
nav{
background-color:#B85900;
}
nav ul {
padding:0;
margin:0;
list-style: none;
}
nav ul li {
margin: 0px -7px 0 0;
display:inline-block;
}
nav a {
display:block;
color:#FFD700;
font-size:20px;
margin-left: 35px;
}
nav a:hover {
color:#05A4B4;
}
#slider {
position: relative;
text-align: center;
top: 10px;
}
#slider{
margin: 0 auto;
}
#slides article{
width: 20%;
float: left;
}
#slides .image{
width: 500%;
line-height: 0;
}
#overflow{
width: 100%;
overflow: hidden;
}
article img{
width: 100%;
}
#desktop:checked ~ #slider{
max-width: 960px;
}
#switch1:checked ~ #controls label:nth-child(5),
#switch2:checked ~ #controls label:nth-child(1),
#switch3:checked ~ #controls label:nth-child(2),
#switch4:checked ~ #controls label:nth-child(3),
#switch5:checked ~ #controls label:nth-child(4){
background: url('prev.png') no-repeat;
float: left;
margin: 0 0 0 -84px;
display: block;
height: 68px;
width: 68px;
}
#switch1:checked ~ #controls label:nth-child(2),
#switch2:checked ~ #controls label:nth-child(3),
#switch3:checked ~ #controls label:nth-child(4),
#switch4:checked ~ #controls label:nth-child(5),
#switch5:checked ~ #controls label:nth-child(1){
background: url('next.png') no-repeat;
float: right;
margin: 0 -84px 0 0;
display: block;
height: 68px;
width: 68px;
}
label, a{
cursor: pointer;
}
.all input{
display: none;
}
#switch1:checked ~ #slides .image{
margin-left: 0;
}
#switch2:checked ~ #slides .image{
margin-left: -100%;
}
#switch3:checked ~ #slides .image{
margin-left: -200%;
}
#switch4:checked ~ #slides .image{
margin-left: -300%;
}
#switch5:checked ~ #slides .image{
margin-left: -400%;
}
#controls{
margin: -25% 0 0 0;
width: 100%;
height: 50px;
}
#active label{
border-radius: 10px;
display: inline-block;
width: 15px;
height: 15px;
background: #bbb;
}
#active{
margin: 23% 0 0;
text-align: center;
}
#active label:hover{
background: #76c8ff;
border-color: #777 !important;
}
#switch1:checked ~ #active label:nth-child(1),
#switch2:checked ~ #active label:nth-child(2),
#switch3:checked ~ #active label:nth-child(3),
#switch4:checked ~ #active label:nth-child(4),
#switch5:checked ~ #active label:nth-child(5){
background: #18a3dd;
border-color: #18a3dd !important;
}
#slides .image{
transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
}
#controls label:hover{
opacity: 0.6;
}
#controls label{
transition: opacity 0.2s ease-out;
}
Простой
