Ребят привет! помогите пожалуйста! никак не получается сделать автоматическую прокрутку слайдера c задержкой 3 сек, только ручной:
HTML:
<div id="carousel">
<figure id="spinner">
<img src="images/pic1.jpg" title="" alt="">
<img src="images/pic2.jpg" title="" alt="">
<img src="images/pic3.jpg" title="" alt="">
<img src="images/pic4.jpg" title="" alt="">
<img src="images/pic5.jpg" title="" alt="">
<img src="images/parkkk.jpg" title="" alt="">
</figure>
</div>
<span style=float:left class=ss-icon onclick="galleryspin('-')"><</span>
<span style=float:right class=ss-icon onclick="galleryspin('')">></span>
__________________________________________________ _______________________
CSS:
div#carousel {
margin-top: 0.8%;
perspective: 1200px;
background: linear-gradient(#037DAB,#022836);
padding-top: 3%;
font-size:0;
margin-bottom: 3rem;
overflow: hidden;
}
figure#spinner {
transform-style: preserve-3d;
height: 250px;
transform-origin: 50% 50% -700px;
transition: 1s;
}
figure#spinner img {
width: 60%; max-width: 1000px;
position: absolute; left: 20%;
transform-origin: 50% 50% -700px;
outline:1px solid transparent;
}
figure#spinner img:nth-child(1) { transform:rotateY(0deg);
}
figure#spinner img:nth-child(2) { transform: rotateY(-60deg); }
figure#spinner img:nth-child(3) { transform: rotateY(-120deg); }
figure#spinner img:nth-child(4) { transform: rotateY(-180deg); }
figure#spinner img:nth-child(5){ transform: rotateY(-240deg); }
figure#spinner img:nth-child(6){ transform: rotateY(-300deg); }
div#carousel ~ span {
color: #fff;
margin: 5%;
display: inline-block;
text-decoration: none;
font-size: 2rem;
transition: 0.6s color;
position: relative;
margin-top: -6rem;
border-bottom: none;
line-height: 0; }
div#carousel ~ span:hover { color: #888; cursor: pointer; }
__________________________________________________ __________________
JS:
var angle = 0;
function galleryspin(sign) {
spinner = document.querySelector("#spinner");
if (!sign) { angle = angle + 45; } else { angle = angle - 45; }
spinner.setAttribute("style","-webkit-transform: rotateY("+ angle +"deg); -moz-transform: rotateY("+ angle +"deg); transform: rotateY("+ angle +"deg);");
setInterval(nextImage, 3000);
}
Заранее Спасибо большое!!
