1

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)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>

2
  • Puedes compartir tu código de plusSlides() ? Commented el 27 ago. 2018 a las 21:27
  • No es aconsejable manipular el CSS desde JavaScript por 2 razones fundamentales: la primera (y la mas importante) es que se debe dejar el CSS para el CSS. 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.
    – Tato OC
    Commented el 28 ago. 2018 a las 3:55

1 respuesta 1

1

Ajuste tu código un poco y lo logre, puedes dejar tu función showSlides() si quieres también, pero puedes mejorarla:

var slideIndex = 0;
var slides = document.getElementsByClassName("mySlides");
showSlides();

function showSlides() {
  slideIndex++;
  if(slideIndex > slides.length - 1)
    slideIndex = 0;
  for(var i = 0; i < slides.length; i++) {
    if (i == slideIndex)
      slides[i].style.display = "block";
    else
      slides[i].style.display = "none";
  };
  setTimeout(showSlides,2000);
}

function plusSlides(pos){
  slideIndex += pos;
  if(slideIndex > slides.length - 1) 
    slideIndex = 0;
  if(slideIndex < 0)
    slideIndex = slides.length - 1;
  for (i = 0; i < slides.length; i++){
    if (i == slideIndex)
      slides[i].style.display = "block";
    else
      slides[i].style.display = "none";
  };
}
*{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)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.