soy novato en javascript y tengo un codigo de un slider, lo que pasa es que hace las transiciones en automatico, me gustaría agregarle la funcion a los botones que he puesto.
Les dejo el codigo
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if(slideIndex > slides.length)
{
slideIndex = 1
}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides,2000);
}
*{box-sizing:border-box}
.slideshow-container{
max-width: 1000px;
position:relative;
margin:auto;
}
.mySlides{
display:none;
}
.prev, .next{
cursor:pointer;
position:absolute;
top:50%;
width:auto;
margin-top:-22px;
padding:16px;
color:white;
font-weight:bold;
font-size:18px;
transition:0.6s ease;
border-radius:0 3px 3px 0;
}
.next{
right:0;
border-radius:3px 0 0 3px;
}
.prev:hover, .next:hover{
background-color:rgba(0,0,0,0.8);
}
.text{
color:#f2f2f2;
font-size:15px;
padding:8px 12px;
position:absolute;
bottom:8px;
width:100%;
text-align:center;
}
.numbertext{
color:#f2f2f2;
font-size:12px;
padding:8px 12px;
position:absolute;
top:0;
}
.fade{
-webkit-animation-name:fade;
-webkit-animation-duration:1.5s;
animation-name:fade;
animation-duration:1.5s;
}
@-webkit-keyframes fade{
from{opacity:.4}
to{opacity:1}
}
@keyframes fade{
from{opacity:.4}
to{opacity:1}
}
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="http://st2.depositphotos.com/2511967/11135/i/950/depositphotos_111358942-stock-photo-closeup-pixels-of-lcd-tv.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="http://www.proandroid.com/wp-content/uploads/2017/11/test-resistencia-google-pixel-2-xl.png" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="http://st4.depositphotos.com/1010314/19772/i/1600/depositphotos_197725756-stock-photo-test-pattern-color-television-lines.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
CSS
para elCSS
. A lo que me refiero es que, deberías manipular todo el CSS desde la hoja de estilos correspondiente y mejor pensar la lógica llamando a las propiedades que requieras(clases/ids)
desde javascript. Y la segunda razón es que, estas afectando el performance sin necesidad.