• Saturday , 23 November 2019

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

Code Canyon
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

3d Ocean

Related Posts

43 Comments

  1. Estephany Ruiz
    July 4, 2019 at 13:36

    Gracias por el video me ayudo 😀

  2. gg
    July 4, 2019 at 13:36

    Gracias wapo

  3. Alejandro Garcia Gallardo
    July 4, 2019 at 13:36

    no sigue el slider en mi carrusel es decir solo queda pegado en una foto

  4. Manuel Castillo
    July 4, 2019 at 13:36

    Súper buen video. Pero la curiosidad me llena a preguntarme: qué otros componentes puedo usar dentro de cada slide y si quiero agregarle una barra de navegación?

  5. Noob y Crack
    July 4, 2019 at 13:36

    Hola bro, muy bueno tu video pero me surge un problema, no cambia de imagen mi slider, no se si sea por alguna alteración en el código que en estas fechas, podrías ayudarme?

  6. Ivan Leiva96
    July 4, 2019 at 13:36

    con que comando ordenas el codigo bro?

  7. WerneriaBit
    July 4, 2019 at 13:36

    Me gustó.

  8. Miguel Triggiano
    July 4, 2019 at 13:36

    Excelente tuto!… Hay forma de mover los subtitulos dentro de las imagenes?

  9. Héctor Jara
    July 4, 2019 at 13:36

    si las imagenes que quieres sacar de la base de datos y recorrerlas con un for
    como seria la sintaxis en el carousel??

  10. JIAng- SHun
    July 4, 2019 at 13:36

    necesito que mi imagen slider quede sin margenes y por debajo de header como hago?

  11. LS
    July 4, 2019 at 13:36

    hago lo mismo pero no pasa la primera imagen se queda solo en la primera y si me esta reconociendo el boostrap , a que se deveria?

  12. Christian Navarro
    July 4, 2019 at 13:36

    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. raul ortega gonzales
    July 4, 2019 at 13:36

    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

  14. Murcielago Lamborghini
    July 4, 2019 at 13:36

    Como puedo cambiar el color de los controles e indicadores…?

    Al agregarle el height:100vh aparece un margen entre el Slider y en Nav (Bootstrap 4.1).

  15. J. Villasmil
    July 4, 2019 at 13:36

    Y como pongo mas?

  16. Maria Alejandra Arcila
    July 4, 2019 at 13:36

    Saludos desde Venezuela. Muy buenos tus videos. Necesito ayuda. Quiero hacer 2 slides diferentes en una misma pagina. Que valor debo modificar en las lineas de código para que no me cree conflicto? Gracias desde ya!!

  17. Ange C
    July 4, 2019 at 13:36

    Asi va la página https://bakery2018.000webhostapp.com/bootstrap/index.html muchas gracias por el curso!!!

  18. Daino PC
    July 4, 2019 at 13:36

    cómo centramos el texto de las imágenes del slider

  19. Juan Manuel Salazar Vázquez
    July 4, 2019 at 13:36

    Hola.
    Como hago para que el slider funcione en dispositivos móviles al deslizar el dedo en la pantalla?

  20. Morgan Dgz
    July 4, 2019 at 13:36

    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?

  21. Osvaldo César
    July 4, 2019 at 13:36

    Una pregunta, cómo puedo hacer para eliminar el paso del slider automático y que sólo funcione con los botones de left o right? Gracias

  22. Raul RHR7285
    July 4, 2019 at 13:36

    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¡

  23. gerardo francisco simancas matos
    July 4, 2019 at 13:36

    Y donde esta el video 15?

  24. Reinaldo Tineo
    July 4, 2019 at 13:36

    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. dxstrelok
    July 4, 2019 at 13:36

    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. D Creativo
    July 4, 2019 at 13:36

    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

  27. julioma
    July 4, 2019 at 13:36

    como puedo cambiar el color de las flechas del carrousel?

  28. Pedro Sanchez
    July 4, 2019 at 13:36

    Hola Ignacio, excelente tu canal… amigo me gustaría saber como agrego un slide pero de productos, donde se muestren varios a la vez

  29. Antonio Lugo
    July 4, 2019 at 13:36

    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. Paul Miranda
    July 4, 2019 at 13:36

    😀 í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. Makko Marika
    July 4, 2019 at 13:36

    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. Johnnathan Hernan
    July 4, 2019 at 13:36

    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.

  33. Luis Bedoya
    July 4, 2019 at 13:36

    Excelente tutorial, explicas super bien es que hay algunos que cuando explican lo duermen a uno pero lo manejas muy bien !!!

  34. Paltibenlaish
    July 4, 2019 at 13:36

    muy bueno
    pero cuando copio el codigo y le pongo img se aparecen una abajo de la otra y sin el efecto de slide???
    alguna solucion
    gracias
    saludos??

  35. Otto Barrios
    July 4, 2019 at 13:36

    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. Francisco Falcone
    July 4, 2019 at 13: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. Pedro Peña
    July 4, 2019 at 13:36

    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. Oscar FH
    July 4, 2019 at 13:36

    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 🙂

  39. Luis Serrano
    July 4, 2019 at 13:36

    No se supone que funciona con un carousel. css, a mi no me funka!!

  40. Angel Niño
    July 4, 2019 at 13:36

    Excelente explicación, la verdad eres muy bueno explicando!! sigue así

  41. José Carlos Castillo
    July 4, 2019 at 13:36

    Que buen tutorial demasiado fácil, pero no se como agregarle el efecto swipe, para que se pueda arrastrar con el dedo en celulares móviles, crees poder ayudarme con eso? probé con un código de jquery que encontré pero no lo pude solucionar. de esta página saque los códigos https://lazcreative.com/blog/adding-swipe-support-to-bootstrap-carousel-3-0/

  42. DeathPool
    July 4, 2019 at 13:36

    excelente videos Nacho!!!!

  43. Francisco Herrera Alvarez
    July 4, 2019 at 13:36

    Maestro, cuando tenga un hijo le pondré IgnacioGutierrez…
    consulta, tienes info de como crear el slideshow automático, vale decir, que las imágenes se pasen solas!!
    Muchas gracias por tu aporte genio…

Leave A Comment

You must be logged in to post a comment.