D4mations.com

#16 Carousel – Cómo hacer un Slideshow – Curso completo de Bootstrap 4! 2017 desde cero

[ad_1]
https://i.ytimg.com/vi/0G-ZDhRN8jw/hqdefault.jpg



En este tutorial te explico cómo hacer un Slideshow con Bootstrap 4!
Utilizaremos el componente más popular de Bootstrap, además de realizar algunas configuraciones para que nuestro carousel tenga una dimensión del 100% del ancho y detecte el alto automáticamente.

Finalmente te comento que este Slider es responsive (se adapta a diferentes dispositivos) y está ocupando Html5 y Css3 entre otras configuraciones.

No olvides suscribirte a este hermoso canal y destruirme en los comentarios 🙂

También puedes seguirme en Facebook: https://www.facebook.com/bluuweb/

Finalmente visita mi sitio web: http://ignaciogutierrez.cl

Original source

d4mer

,
, , , , , , , , , , , , , ,

43 responses to “#16 Carousel – Cómo hacer un Slideshow – Curso completo de Bootstrap 4! 2017 desde cero”

  12. Se que ya ha pasado un tiempo desde que subiste este tutorial, pero tengo la duda si puedo hacer un navbar dentro del carousel, lo he intentado hacer ambas dentro de un container-fluid pero el carousel no utiliza la pantalla completa(100vh) habrá alguna posibilidad de que me ayudes o puedas resolver mi duda?

  13. excelente amigo eres genial!… quiero agregarle un <header> desde css … como puedo superponer un header sin afectar el lo que ya esta establecido en cuanto al tamaño?… intente darle un encabezado pero como las imagenes tienen un height: 100vh; me sale un scroll y se ve horrible amigo ayudame

  20. Saludo necesito hacer un carusel en el que se vean 4 imagenes simultaneamente en pantallas de escritorio y que se redusca de tamaño conforme a la pantalla del dispositivo se menor! me podrias ayudar?

  22. Hola necesito ayuda con el slider, no es responsivo cuando esta en modo dispositivo. ya encontre una solucion para esto y es que en la css mando atraer una clase con esta funcion "margin-bottom: auto;" pero cuando esta en modo dispositivo lo que se encuentre debajo del slider me pone un espaciado muy grande y quisiera saber como hacer que eso no suceda !gracias¡

  24. Hey, buen vídeo. Una cosa… al probar la pagina con el carousel en modo móvil se ve la imagen pequeña y lo que queda de la pantalla, en blanco. Cuando bajo un poco, aparece la barra de navegación /:

  25. muy buen video pero tengo un problema quiero modificar el tiempo de intervalo de una imagen con la siguiente como puedo hacerlo ? ya que por defecto esta cada 5 seg el slider y quiero dejarlo cada 2 seg

  26. Tengo un slider y estoy utilizando holder.js para hacer un ejemplo. El problema es que yo le doy una altura de 400 para que no sea toda la pantalla y cuando lo visualizo me aparece la imagen pero con un grande espacio abajo, como si no tuviera otra opción de colocar toda la pantalla ¿como lo puedo solucionar? me gustan tus tutoriales. Saludos

  29. Hola Ignacio, ante todo felicitaciones por tu aporte claro en los conceptos, estoy siguiendo tus tutoriales y lo vengo poniendo en práctica y justamente quería consultarte respecto al carrusel que utlizas de ejemplo porque probé con el código y no me levanta el carrusel, copié y pegué el código, y luego puse la ruta de las imágenes y nada. Mi interrogante es si no me está faltando alguna clase o código js. Aclaro que tengo las rutas de bootstrap, lquery, y ajax que proporciona la documentación antes del cierre del body. Agradeceré tu ayuda

  30. 😀 ídolo … muy buen curso … tu manera de explicar las cosas no hace la vida mas fácil :V se agradece mucho … tengo una pequeña consulta …¿como puedo hacer que el slideshow sea automático ?

  31. Eyy Bluueweb encontré la solución al problema de las imágenes que se dañaban al disminuir la pantalla!!! jjejejjeje y Keraky ponlo así en el html donde esta la etiqueta div con la clase carousel-item y listo ya las imágenes del slider se adaptan a dispositivos..

    ejemplo:

    <div class="carousel-item">
    <picture>
    <img class="d-block img-fluid" src="images/analitico.jpg" alt="First slide">
    <div class="carousel-caption d-none d-md-block">
    <h3>SISTEMA CRM</h3>
    <p>…</p>
    </div>
    </picture>
    </div>

    Y listo las imegenes son responsive, espero sirva de ayuda!!

  32. Hola, de todos tus vídeos, tengo problemas con slider (no da clic y no pasa las imágenes) y con el nav (al responive, no me aparece la lista del nav al darle clic), por favor si podrias ayudarme con esto, gracias.

  35. Buen dia amigo, estoy diseñando una pagina web de una venta de auto y el cliente quiere una galeria de fotos pero que al darle click a la imagen esta abra un carousel tipo "lightbox" pero con las fotos otras fotos de ese auto (no de la galeria). Podrías ayudarme con eso?.. Gracias de antemano..

  36. Una consulta,lo estoy probando y funciona la perfección en la pc en todos los navegadores.
    Pero al probarlo en tablet o celular, en Google Chrome, las imágenes del carrusel no se ajustan correctamente y se muestran desproporcionadas ya que se ajusta en lo horizontal pero no en lo vertical (quedan alargadas).
    Existe algún estilo para corregir esto?
    Es extraño porque por lo que he verificado parece suceder solamente en Chrome.
    Gracias por tu respuesta y adelante con más tutoriales!

  37. Hola Buenas Noches, estoy siguiendo tu Curso por Udemy me parece muy bueno y didáctico , pero tengo una consulta los recursos como imagenes y demás carpetas donde los encuentro

  38. Que tal Ignacio tengo un problemita, ¿Cómo podría hacer para que mis imágenes del slide al hacerla pequeña no se deforme? ya que de altura quedo con el "height: vh" pero de ancho ¿Cómo sería? porque como que se aplastan. sin más continuare viendo tus videos ya que me agradan y aprendo demasiado, un saludo 🙂

Leave a Reply