Есть слайдер на js, переключается автоматический и при наведении на него появляются кнопки , соответствующие одному из слайдов , нужно сделать так , что бы если активен 3 слайд то 3 кнопка выделялась как нибудь , например закрашивалась черным а другие оставались белым. Еще вопрос, как сделать анимацию появления кнопок? Пытался прописывать в hover события opacity, но получается резкое появление в любом случае
var btn = document.querySelectorAll('#change'),
three = document.querySelectorAll('.three')[0];
var count = 0;
var runSlide = startSlide(6000);
for (let i = 0; i < btn.length; i++) {
btn[i].addEventListener('click', function() {
three.className = 'three';
three.classList.add('three-' + i);
count = i;
setInterval(function() {}, 6000)
});
}
function startSlide(time) {
return setInterval(function() {
if (count == btn.length) {
count = 0;
}
three.className = 'three';
three.classList.add('three-' + count);
count++;
}, 6000);
}
.one {
position: relative;
z-index: 1;
width: 1200px;
height: 464px;
background: green;
display: flex;
flex-direction: row;
overflow: hidden;
}
.one:hover .two {
display: block;
animation-duration: 0.5s;
}
.three:hover .two {
display: block;
}
.two {
opacity: 0.8;
animation-timing-function: ease;
position: absolute;
margin-top: 400px;
position: absolute;
margin-left: 100px;
width: 350px;
height: 50px;
z-index: 1000;
display: none;
}
.two p {
display: inline;
}
.two div {
margin-right: 5px;
border-radius: 50%;
padding: 0px 10px 3px 10px;
width: 80px;
height: 30px;
background-color: #fff;
display: inline;
cursor: pointer;
}
#change {
width: 10px;
height: 10px;
}
.three {
position: relative;
display: flex;
flex-wrap: nowrap;
flex-direction: row;
width: 1200px;
height: 464px;
transition: transform .3s;
transform: translateX(0);
}
.three-0 {
transition: transform .3s;
transform: translateX(0);
}
.three-1 {
transition: transform .3s;
transform: translateX(-1200px);
}
.three-2 {
transition: transform .3s;
transform: translateX(-2400px);
}
.three-3 {
transition: transform .3s;
transform: translateX(-3600px);
}
.three-4 {
transition: transform .3s;
transform: translateX(-4800px);
}
.four {
min-width: 1200px;
}
<div class="one">
<div class="three three-0">
<div class="four" style="background: #cd1; text-align: center;">11</div>
<div class="four" style="background: #1cd; text-align: center;">22</div>
<div class="four" style="background: #11d; text-align: center;">33</div>
<div class="four" style="background: #d0e; text-align: center;">44</div>
</div>
<div class="two">
<div id="change">1</div>
<div id="change">2</div>
<div id="change">3</div>
<div id="change">4</div>
</div>
</div>