0

Estoy usando este codigo de slideshow https://www.w3schools.com/howto/howto_js_slideshow.asp

Y el problema reside en que hasta que no le das a las bolitas las fotos no aparecen, el resto funciona bien. En el css hay un parametro dentro de .myslides que se llama display y esta puesto en "none", pero si lo cambio aparecen todas las fotos a la vey y practicamente destruye la web. A ver si se puede encontrar una solucion, gracias de antemano!

Mi codigo

  var slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
}
body {
  background: url("./recursos/fondo.jpg");
  font-family: helvetica, arial, serif;
  font-size: 13px;
  text-align: center;
}

.wrap {
  display: inline-block;
  -webkit-box-shadow: 0 0 70px #fff;
  -moz-box-shadow: 0 0 70px #fff;
  box-shadow: 0 0 70px #fff;
  margin-top: 40px;
}

.decor {
  background: #6EAF8D;
  background: -webkit-linear-gradient(left, #CDEBDB 50%, #6EAF8D 50%);
  background: -moz-linear-gradient(left, #CDEBDB 50%, #6EAF8D 50%);
  background: -o-linear-gradient(left, #CDEBDB 50%, #6EAF8D 50%);
  background: linear-gradient(left, white 50%, #6EAF8D 50%);
  background-size: 50px 25%;;
  padding: 2px;
  display: block;
}

a {
  text-decoration: none;
  color: #fff;
  display: block;
}

ul {
  list-style: none;
  position: relative;
  text-align: left;
}

li {
  float: left;
}

ul:after {
  clear: both;
}

ul:before,
ul:after {
    content: " ";
    display: table;
}

nav {
  position: relative;
  background: #2B2B2B;
  background-image: -webkit-linear-gradient(bottom, #2B2B2B 7%, #333333 100%);
  background-image: -moz-linear-gradient(bottom, #2B2B2B 7%, #333333 100%);
  background-image: -o-linear-gradient(bottom, #2B2B2B 7%, #333333 100%);
  background-image: linear-gradient(bottom, #2B2B2B 7%, #333333 100%);
  text-align: center;
  letter-spacing: 1px;
  text-shadow: 1px 1px 1px #0E0E0E;
  -webkit-box-shadow: 2px 2px 3px #888;
  -moz-box-shadow: 2px 2px 3px #888;
  box-shadow: 2px 2px 3px #888;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
}

ul.primary li a {
  display: block;
  padding: 20px 30px;
  border-right: 1px solid #3D3D3D;
}

ul.primary li:last-child a {
  border-right: none;
}

ul.primary li a:hover {

  color: #000;
}

ul.sub {
  position: absolute;
  z-index: 200;
  box-shadow: 2px 2px 0 #BEBEBE;
  width: 35%;
  display:none;
}

ul.sub li {
  float: none;
  margin: 0;
}

ul.sub li a {
  border-bottom: 1px dotted #ccc;
  border-right: none;
  color: #000;
  padding: 15px 30px;
}

ul.sub li:last-child a {
  border-bottom: none;
}

ul.sub li a:hover {
  color: #000;
  background: #eeeeee;
}

ul.primary li:hover ul {
  display: block;
  background: #fff;
}

ul.primary li:hover a {
  background: #fff;
  color: #666;
  text-shadow: none;
}

ul.primary li:hover > a{
  color: #000;
}

@media only screen and (max-width: 600px) {
  .decor {
    padding: 3px;
  }

  .wrap {
    width: 100%;
    margin-top: 0px;
  }

   li {
    float: none;
  }

  ul.primary li:hover a {
    background: none;
    color: #8B8B8B;
    text-shadow: 1px 1px #000;
  }

  ul.primary li:hover ul {
    display: block;
    background: #272727;
    color: #fff;
  }

  ul.sub {
    display: block;
    position: static;
    box-shadow: none;
    width: 100%;
  }

  ul.sub li a {
    background: #272727;
    border: none;
    color: #8B8B8B;
  }

  ul.sub li a:hover {
    color: #ccc;
    background: none;
  }
}

.cuadrado {
  width: 900px;
  height: 800px;
  background-color: #ecf0f1;
  font-family: helvetica;
  font-weight: bold;
  border: #2c3e50 2px solid;
  color: #2c3e50;
}

.titulo {
  font-family: Georgia;
  font-weight: bold;
  font-size: 40px;
  align: center;
}

.minus {
  text-transform: lowercase;
}

.textodebajo {
  font-size: 20px;
  font-family: monospace;
  background-color: #2c3e50 opacity: 0.50;
  max-width: 750px;
  align: justify;
}

/*slider*/
* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 750px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.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;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.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}
}
<html>

<body>
  <head>
  <meta name="viewport" content="width=device-width">
</head>

<div class="wrap">
<span class="decor"></span>
<nav>
  <ul class="primary">
    <li>
      <a href="">Home</a>
    </li>
    <li>
      <a href="">Week</a>
      <ul class="sub">
        <li><a href="">Week 1</a></li>
        <li><a href="">Week 2</a></li>
        <li><a href="">Week 3</a></li>
        <li><a href="">Week 4</a></li>
      </ul>
    </li>
    <li>
      <a href="">Cities</a>
      <ul class="sub">
        <li><a href="">Leipzig</a></li>
        <li><a href="">Berlin</a></li>
        <li><a href="">Dresden</a></li>
      </ul>
    </li>
    <li>
      <a href="">Free time</a>
      <ul class="sub">
        <li><a href="">Vitalis</a></li>
        <li><a href="">Leipzig</a></li>
        <li><a href="">Berlin</a></li>
      </ul>
    </li>
  </ul>
</nav>
</div>
<br><br>
<center>
  <div class=cuadrado id=centro>
    <br><br>
    <h1 class=titulo>My travel to germany</h1>
    <br>

    <!-- Slideshow container -->
    <div class="slideshow-container">

      <!-- Full-width images with number and caption text -->
      <div class="mySlides fade">
        <div class="numbertext">1 / 3</div>
        <img src="./recursos/picworking.jpg" style="width:100%" alt="imagen-1">
        <div class="text">Working on the office</div>
      </div>

      <div class="mySlides fade">
        <div class="numbertext">2 / 3</div>
        <img src="./recursos/picxavito.jpg" style="width:90%"  alt="imagen-2">
        <div class="text">With my friend</div>
      </div>

      <div class="mySlides fade">
        <div class="numbertext">3 / 3</div>
        <img src="./recursos/picdreden.jpg" style="width:95%"  alt="imagen-3">
        <div class="text">Good panoramic of the city</div>
      </div>

      <!-- Next and previous buttons -->
      <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
      <a class="next" onclick="plusSlides(1)">&#10095;</a>
    </div>
    <br>

    <!-- The dots/circles -->
    <div style="text-align:center">
      <span class="dot" onclick="currentSlide(1)"></span>
      <span class="dot" onclick="currentSlide(2)"></span>
      <span class="dot" onclick="currentSlide(3)"></span>
    </div>
    <br><br>
<div>
  <p class="textodebajo">Hi my name is Daniel and im gona tell you on this website my travel to germany, how i meet amazing people
  , discovered new sites, new cultures, a lot of good food, and the most important: the things i learned</p>
</div>


  </div>
  <div id=footer>
    <br>
    <p class=minus>By Daniel Valentin Alonso Maqueira</p>
  </div>
</center>
</body>
</html>

Gracias a los comentarios con los consejos

7
  • Buenas, primero de todo puedes pasar tu codigo?
    – KeTeMeTo
    Commented el 20 jun. 2019 a las 8:52
  • 2
    Bienvenido a Stack Overflow en español, te sugiero que hagas el recorrido de bienvenida y, de paso, ganar tu primera medalla. También es importante que leas Cómo preguntar y ejemplo mínimo verificable para poder mejorar tus preguntas y que sean bien recibidas por la comunidad, de esta manera favoreces a que los usuarios las respondan y te ayuden
    – Rabegi
    Commented el 20 jun. 2019 a las 8:56
  • 1
    Una observación: el ejemplo del enlace utiliza javascript no java. A lo mejor tendrías que editar tu pregunta y cambiar la etiqueta java por la de javascript. Y si la estas editando por favor agrega el código. En el ejemplo del enlace no vero "bolitas", y funciona correctamente.
    – enxaneta
    Commented el 20 jun. 2019 a las 9:12
  • @KeTeMeTo hecho Commented el 20 jun. 2019 a las 9:57
  • @enxaneta gracias por la observacion, ya he puesto el codigo. Commented el 20 jun. 2019 a las 9:57

1 respuesta 1

1

Podrías mostrar siempre la primera foto por defecto, del primer elemento que tenga la clase ".mySlides". Sería asi:

.mySlides {
    display: none;
}

.mySlides:first-of-type {
   display: block;
}
3
  • Muchisimas gracias! Ya esta solucionado. Commented el 20 jun. 2019 a las 11:42
  • @DanielAlonsoMaqueira Si esta respuesta te ha servido para solucionar el problema, marcala como "aceptada" para que le pueda ayudar a mas gente. Y si no es así pero ya has encontrado el problema por tu cuenta, lo puedes poner como respuesta a tu propia pregunta!
    – x3k
    Commented el 20 jun. 2019 a las 12:24
  • Perdona el descuido, ya está marcado! Commented el 21 jun. 2019 a las 13:55

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.