@Ivan_Worker

Как сделать autoplay?

Есть слайдер работающий в который я не знаю как установить 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;
}
  • Вопрос задан
  • 755 просмотров
Решения вопроса 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Выкинуть нафиг это унылое говно на радио-инпутах и взять готовый пример с сайта слика kenwheeler.github.io/slick (там есть с автоплеем дёмка)
Потом достилизовать как вам нужно.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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