3

Hola quiero hacer una libreria foto que sea de solo una linea y mostrar las fotos que solo caben en el ancho del div padre y al dar next o prev que se oculte una y se muestre otra, adjunto una foto para que se entienda mejor, no quiero que baje ya que el height padre es auto sino ocultar las fotos que no caben en el ancho del padre

introducir la descripción de la imagen aquí

        <div id="padre">
          <div class="foto">1</div>
          <div class="foto">2</div>
          <div class="foto">3</div>
          <div class="foto">4</div>
        </div>
    <div id="next"></div>
    <div id="prev"></div>

#padre{
width:100%;
height:auto;
}
.foto{
width:250px;
height:300px;
background-color:red;
}
5
  • Prueba con overflow:hidden; Commented el 7 ene. 2020 a las 11:16
  • Usando boostrap ya lo resuelve con las clases de "col-md /lg/sm y xs" deberias ver esta documentación primero antes de hacerlo a mano. Commented el 7 ene. 2020 a las 11:18
  • Para realizar un slider o carrusel vas a tener que implementar tanto css como javascript para poder realizar los efectos de entrada y salida de las imágenes con flechas o como consideres. Una buena alternativa en este caso es utilizar un framework, como te comenta el compañero Bootstrap te puede resulta de ayuda. Para que veas un ejemplo de como puede quedar tu galería te dejo un ejemplo que puede servir de referencia al respecto: mdbootstrap.com/plugins/jquery/gallery/#carousel-1
    – JorgeGuz
    Commented el 7 ene. 2020 a las 11:36
  • Con media querys
    – JJMADEO
    Commented el 7 ene. 2020 a las 13:03
  • aún necesitas ayuda con esto? ya que no veo que respondas a las dudas de los colaboradores Commented el 7 ene. 2020 a las 13:59

1 respuesta 1

-2

Hola No soy experto pero supongo que si lo quieres hacer solo con CSS y ninguna librería de estilos te recomiendo que estudies lo que son las posiciones de los objetos (Absoluta, flotante, absoluta) ademas de que tendrás que aplicar JS

De todas maneras aquí te dejo un enlace con un ejemplo hecho en bootstrap 4.0.0, es casi como lo que quieres

https://bootsnipp.com/snippets/dl6ez

Otro ejemplo: DEMO: https://azmind.com/demo/bootstrap-carousel-multiple-items/

Instrucciones: https://azmind.com/bootstrap-carousel-multiple-items/

1
  • pues lo que yo pense era en hacerlo con jquery no quiero librerias de ningun tipo salvo jquery, lo que yo pensaba era hacerle un for que si la suma de la div hijos son menores que el div padre que se oculte, pero no se como crear la varable que me calcule el ancho y que lo aplique Commented el 8 ene. 2020 a las 8:28

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.