0

Quisiera saber cómo puedo hacer un slideshow, he buscado varios tutoriales pero ninguno puedo hacer que me funcione o no comprendo las lecciones. Estoy tratando de hacer que dentro de una especie de modal haya un slideShow, algo así como las imágenes en Facebook.

Acá mi código:

$('btnd').click(function() {
  $("#slidecont > img:gt(1)").hide();

  setInterval(function() {
    $('#slidecont > img:first')
      .fadeOut(1000)
      .next()
      .fadeIn(1000)
      .end()
      .appendTo('#slidecont');
  }, 3000);
});
:root {
  --MColor: #00A4DB;
  --FontB: #262626;
  --FontW: #FCFCFC;
  --LBackColor: #EDF6FF;
  --BackColor: #c7f1ff;
  --CBackColor: #a0e7ff;
  --DarkColor: #0091c2;
  --SDarkColor: #006b8f;
  --UDarkColor: #003d52;
  --ULine: #29c9ff;
  --Warning: #ff6b00;
  --Error: #f02000;
  --Def: #c5c5c5;
  --OK: #00bd68;
  /*Otras Variables*/
  --FontF: 'Roboto';
  --FontS: 20px;
  --FontSU: 24px;
  --FontSM: 16px;
  --FontSN: 12px;
  --bormin: 2px;
}

#pbint {
  display: flex;
  width: 90%;
  flex-wrap: wrap;
  border: 5px solid var(--MColor);
  border-radius: 5px;
  margin: 7% auto;
  min-width: 900px;
}


/*Contenedor para el titulo de la publicacion*/

#cut1 {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 10%;
  padding: 15px;
  background: var(--MColor);
}

#cut1 h2 {
  font-size: 30px;
  color: var(--FontW);
}

#cut1 a {
  text-decoration: none;
}

#cut1 button:active {
  background-color: var(--MColor);
  color: var(--FontW);
  transform: translateY(2px);
}

#cut1 button {
  background: none;
  border: none;
}

#cut1 i {
  font-size: 30px;
}


/*Contenedor para la imagen de la publicacion*/

#cut2 {
  width: 65%;
  height: 100%;
  border-right: 5px solid var(--MColor);
  display: flex;
  align-items: center;
  position: relative;
  background: rgba(0, 0, 0, 0.94);
}

.btnch {
  position: absolute;
  z-index: 1000;
}

#btni {
  left: 2%;
}

#btnd {
  right: 2%;
}

#cut2 button {
  background-color: rgba(255, 255, 255, 0);
  border: 2px solid var(--SDarkColor);
  color: var(--FontB);
  padding: 2px 5px 5px 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  line-height: 20px;
  border-radius: 6px;
  transition: all 0.2s ease;
  z-index: 1000;
}

#cut2 button:hover {
  background-color: var(--MColor);
}

#cut2 button:active {
  transform: translateY(4px);
}

.precont {
  display: flex;
  width: 100%;
  height: 100%;
}

.slidecont {
  position: relative;
  width: 100%;
  height: 56.2vh;
}

.mySlides {
  position: absolute;
  width: 100%;
  height: 100%;
}


/*Contenedor para la descripcion de la publicacion*/

#cut3 {
  display: flex;
  width: 35%;
  padding: 20px;
  text-align: justify;
  background: var(--SDarkColor);
  flex-direction: column;
  justify-content: space-around;
}

#cut3 p {
  border: 2px solid var(--FontW);
  padding: 20px;
  font-size: 18px;
  color: var(--FontW);
}

#cut3 div {
  display: flex;
  flex-direction: column;
}

#cut3 i {
  text-align: center;
}

#fados {
  margin-top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pbint">
  <div id="cut1">
    <h2>Album De Fotos</h2>
  </div>
  <div id="cut2">
    <div class="btnch" id="btni"><button type="button" class="stbtn" id="rbtn"><i class="fa fa-arrow-left fa-2x"></i></button></div>
    <div class="precont">
      <div class="slidecont">
        <img src="https://www.planwallpaper.com/static/images/general-night-golden-gate-bridge-hd-wallpapers-golden-gate-bridge-wallpaper.jpg" class="mySlides" id="fimg" alt="">
        <img src="https://www.planwallpaper.com/static/images/880665-road-wallpapers.jpg" class="mySlides" alt="">
        <img src="http://saxony-blue.com/data/out/111/6148467-wallpaper-s.jpg" class="mySlides" id="limg" alt="">
      </div>
    </div>
    <div class="btnch" id="btnd"><button type="button" class="stbtn" id="nbtn"><i class="fa fa-arrow-right fa-2x"></i></button></div>
  </div>
  <div id="cut3">
    <div><i class="fa fa-home fa-2x"></i>
      <p>Nombre del Dueño de la Foto:<br> Nombre</p>
    </div>
    <div>
      <i class="fa fa-info-circle fa-2x" id="fados"></i>
      <p>Tamaño de la foto: <br> 900x900</p>
    </div>
    <div>
      <i class="fa fa-map-marker fa-2x" id="fados"></i>
      <p>Ubicacion: Aqui se tomo la foto.</p>
    </div>
  </div>
</div>

1
  • A tu código le faltan algunos ). Dices que has visto varios tutoriales pero no mencionas ninguno ni los problemas que has tenido. ¿Obtienes algún mensaje de error?
    – Rubén
    el 28 ene. 2018 a las 20:32

1 respuesta 1

0

No pude probar tu código correctamente, pero tal vez esto te ayude. Va en tu JS:

$('btnd').click(function(){
    $("#slidecont > img:gt(1)").hide();

    setInterval(function() { 
      $('#slidecont > img:first')
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo('#slidecont');
    },  3000);
});

Si no funciona por favor agrega tu html completo (bueno no completo, pero si con las etiquetas de inicio y final y con tu estilo y js personalizado) para ayudarte, o si quieres puedes usar bootstrap para hacer lo que deseas.

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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