1

Estoy creando un carrusel de fotos. Tengo una lista de varias fotos en miniatura pero solo son visibles 3 a la vez. Al hacer clic sobre una de ellas se muestra abajo en grande y con un texto.

Mi tema es la organización de estos tres elementos:

<p>&lt;</p>
lista de fotos
<p>&gt;</p>

El "botón" para avanzar me lo posiciona al final de la lista aunque las fotos no son visibles (display:none). Mi idea es que el "botón" para avanzar quede al final de las 3 fotos visibles. En las imágenes creo que queda más claro.

Imagen del slide de fotos donde el "botón" para avanzar esta considerando las imagenes que no se ven (display:none).

Imagen del slide de fotos con el "botón" para avanzar en el lugar que me gustaría que estuviera.

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function currentDiv(n) {
  showDivs(slideIndex = n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  if (n > x.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = x.length
  }
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" w3-opacity-off", "");
  }
  x[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " w3-opacity-off";
}


var showNumber = 3;
var startPos = 0;
var endPos = showNumber;
var $List = $('ul li');
$List.hide().slice(startPos, endPos).fadeIn();


$('#adelante').click(function() {
  if (endPos < $List.length) {
    startPos = startPos + 1;
    endPos = endPos + 1;
    $List.hide().slice(startPos, endPos).fadeIn();
  }
  return false;
});

$('#atras').click(function() {
  if (startPos > 0) {
    startPos = startPos - 1;
    endPos = endPos - 1;
    $List.hide().slice(startPos, endPos).fadeIn();
  }
  return false;
});
@charset "utf-8";
li {
  list-style-type: none;
}

div.w3-col {
  padding-right: 5px;
}

.mySlides {
  display: none
}

.demo {
  cursor: pointer
}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div>
  <a id="atras" href="#" class="prev">&lt;</a>
</div>

<div>
  <ul>
    <!-- Lista de seis fotos -->

    <li>
      <div class="w3-col s2">
        <img src="https://public.slidesharecdn.com/images/user-48x48.png">
      </div>

    </li>

    <li>
      <div class="w3-col s2">
        <img src="https://public.slidesharecdn.com/images/user-48x48.png">
      </div>
    </li>

    <li>
      <div class="w3-col s2">
        <img src="https://public.slidesharecdn.com/images/user-48x48.png">
    </li>

    <li>
      <div class="w3-col s2">
        <img src="https://public.slidesharecdn.com/images/user-48x48.png">
      </div>
    </li>

    <li>
      <div class="w3-col s2">
        <img src="https://public.slidesharecdn.com/images/user-48x48.png">
      </div>
    </li>

    <li>
      <div class="w3-col s2">
        <img src="https://public.slidesharecdn.com/images/user-48x48.png">
      </div>
    </li>

  </ul>
  </div>

  <div style="float:left; display:inline-block;">
    <a id="adelante" href="#" class="next">&gt;</a>
  </div>

3
  • El código que compartes no funciona porque tus slides no tienen la clase "mySlides" y falla el JS inicial. Aunque ese parece ser sólo un error no relacionado, sería ideal que los ejemplos fueran un ejemplo mínimo verificable, de ese modo los usuarios pueden ver el verdadero error y ayudarte mejor. Lee Cómo preguntar y completa el recorrido de bienvenida para más información (y con ello ganarás una nueva medalla).
    – Alvaro Montoro
    el 9 ago. 2018 a las 10:38
  • De hecho, intentando editar para hacer que el código sea un ejemplo mínimo verificable, me he encontrado con que añadiendo la clase mySlides al ul y la clase demo a los li (¿es eso correcto?) el código funciona sin problemas (y con las flechas donde quieres). Por favor, edita la pregunta para añadir tu código funcional en el que se pueda ver el problema.
    – Alvaro Montoro
    el 9 ago. 2018 a las 10:45
  • Hola Alvaro. Tenías razón en todas tus apreciaciones. Muchas gracias por las respuestas. Saludos, Dahiana
    – Dahiana
    el 9 ago. 2018 a las 23:03

1 respuesta 1

1

Muchas gracias antes que nada a Alvaro Montoro.

Bueno, el problema no era tal.

Para los elementos de la lista utilizo boostrap por lo cual el contenido esta dividido en columnas. Cada li ocupaba 2 columnas. Como el div que contiene la lista no decía cuanto ocupaba, utilizaba todo el espacio que podía, o sea todo el ancho. Como justo tenía 6 fotos pensé que consideraba las que no se veían y por eso colocaba el botón de adelantar tan lejos de las 3 fotos visibles. La sorpresa fue cuando deje solo 3 fotos y seguía pasando, fue así que descubrí que era un tema de que el contenedor div no tenía un ancho determinado, por lo cual al div contenedor de la lista le asigne solo 6 columnas y a cada li 4 columnas para que sumaran 12 que es el número de columnas por defecto del boostrap.

Para ser más gráfica:

Antes:

<div> (por defecto tomaba col-12) 
<li col-2>
<li col-2>
<li col-2>
<li col-2>
<li col-2>
<li col-2>
</div>

Ahora:

<div col-6>
<li col-4>
<li col-4>
<li col-4>
<li col-4>
<li col-4>
<li col-4>
</div>

Los li son de 4 columnas ya que como son solo 3 fotos visibles a las vez, 3 fotos de 4 columnas da 12.

Disculpen si no fui muy ordenada. Soy diseñadora gráfica y aprendo día a día un poco de diseño web.

Gracias y saludos, Dahiana

Tu Respuesta

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

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