Sun. Dec 8th, 2019

Host your Website

Read and learn

FatCow Web Hosting $1.00/mo* Trust your web hosting to the #1 web host provider, GoDaddy!

Como hacer un slideshow para un sitio web con HTML, CSS y JS

1 min read



Aprende como crear un Slideshow para tu sitio web utilizando HTML, CSS y un poco de Javascript.

♦ Blog de diseño web:
http://www.falconmasters.com

♦ Curso de PHP y MYSQL: Completo, Práctico y desde Cero
http://www.tutorialdephp.com

♦ Necesitas ayuda con el tutorial? Únete a nuestra comunidad:
http://www.heroesdelaweb.com


♦ Tutorial escrito, recursos y códigos;

Como hacer un slideshow para un sitio web


Redes Sociales:

♦ Twitter @falconmasters:

♦ Pagina de Facebook:
http://www.falconmasters.com

♦ Curso patrocinado por okhosting:
http://www.okhosting.com

42 thoughts on “Como hacer un slideshow para un sitio web con HTML, CSS y JS

  1. Hola, tengo una duda, el slide es automático cuando yo le pongo "auto: true" en la función en el HTML… Pero deja de ser automático después de apretar los botones de anterior y siguiente… Alguien sabe qué hacer para que siempre sea automático aunque ya haya presionado dichos botones?

  2. hola Falcon espero me puedas ayudar con lo siguiente, lo que pasa es que he insertado el slide perfectamente como nos enseñaste, el problema es que cuando busco mi pagina poniendo https, el carrusel o slideshow sale regado, es decir, las imagenes no se deslizan, pero cuando solo lo pongo con www. si me sale el carrusel, te agradeceria mucho que me ayudaras, ya que no se como hacerle o que pasa, estoy alojado en go daddy.

  3. Hola , he hecho el slideshow y me ha funcionado , pero cuando lo subo a 000webhost no me funciona , todas las imagenes aparecen una debajo de otra , alguien sabe que puede ser ?

  4. muchas gracias por el tutorial pero al final me faltaron unas cositas como por ejemplo la barra donde van los botones me quedo separada de las imagenes y lo otra es que al hacer el cambio para los iconos no se me vieron por lo demas todo quedo chevere, me gustaria un tutoria para colocarle el texto. nuevamente gracias y muchos exitos

  5. primero excelente video, es un tema muy necesario en cualquier página web, pero quisiera hacer una pregunta, cómo quito los números que salen, es decir que solo me aparezcan los botones de play, next y previous, mil gracias de ante mano

  6. Hola Carlos Arturo, es un verdadero honor saludarte. He seguido tus videos por mucho tiempo y he aprendido demasiado de tu trabajo. Te felicito por los contenidos y por la gran capacidad de enseñar. Tengo una inquietud con respecto a éste slider ¿puedo colocar "bullets" o puntos en lugar de los números (1,2,3..)? ¿puedo colocar "íconos" (como los que que muestras en el video) en lugar de los números?

  7. Hola, implemente tus pasos en mi futura pagina y quedo muy bien. TENGO UNA SOLA DUDA, como se puede arreglar para que al ACTUALIZAR LA PAGINA (F5) NO muestre las imagenes una debajo de la otra. debido a que a medida que actualizo me hace eso, aunque las muestra en 1 segundo, pero queda 0 profesional.
    Espero una ayuda. Muchas gracias. Saludos.

  8. Hola Falcon muy buen video, tengo un problema el slider me quedo bien, solo que mi menú no despliega algo esta pasando que me despliega pero atrás del slider. Haber si alguien me podría ayudar.

  9. com puedo hacer para que mi imagenes se vean al 100%? es que solo me toma la parte de arriba de la imagen, la de abajo no aparece y se me ven cortadas las imágenes. gracias si me pueden ayudar, les agradezco

  10. Hola les vengo a ayudar en el min 23:43
    para corregirlo simplemente en la linea de codigo numero 133 donde dice
    return _this.next(_this.options.navigation.effect);
    lo cambian por
    return _this.previous(_this.options.navigation.effect);

    y en la linea numero 138 donde dice
    return _this.previous(_this.options.navigation.effect);
    lo cambian por
    return _this.next(_this.options.navigation.effect);

    No soy desarrollador solo tengo 16 años no digo que sea malo el wey, a lo mejor no se fijó pero ahi les dejo la solucion

  11. Tengo un pequeño problema, hice un slideshow con mas de 50 imágenes, como hago para que no me aparezca todos los números de la cantidad de imágenes que tengo, quisiera que solo apareciera los botones de siguiente atrás, y el de iniciar y pausar, alguien puede orientarme con eso

  12. hola que tal tu aporte esta genial.. solo que tengo un pequeño problema la barra de botones se queda muy abajo del slide y no encuentro la forma de como subirla espero y me puedas ayudar

  13. Tengo un problema, ya quedo todo bien pero la navegación me queda muy abajo y cuando le doy inspeccionar para ver el código fuente ya se pone debajo de las imagenes.
    Como lo soluciono???

  14. Hola , me a sido de gran ayuda tu tutorial, pero me gustaria saber si es posible cambiar los numeros 1 2 34 ect por unos pequeños circulos, de ser así como podria hacerlo, de antemano muchas gracias y saludos

  15. Hola carlos felicitaciones y gracias de antemano por tus tutoriales son exelentes y aportan buen conocimiento, necesito de tu ayuda e seguido cada paso para la creacion del slideshow, pero tengo un problema no me reconoce el archivo, jquery.slides y lo sustituyo por el jquery.slides.min y si se me crea el slisdehow automatico pero no le puedo modificar la altura, ambos estan en la misma carpeta y ruta uno lo reconoce y otro no, que solucion me aportarias bien sea con el archivo o para modificar la altura del slideshow creado con el archivo jquery.slides.min

  16. Te estaba por decir que solucione el error cambiando el orden de la parte de los botones en el archivo, pero despues de hacer esto y solucionarlo vi que te lo han dicho ya xd Aqui me tienes en otro de tus videos jaja

  17. Hola, disculpen tengo un inconveniente, pasa que tengo un menu en mi pagina y cualdo agrego el slideshow y quiero bajar el slideahow se sobremonta sobre el menu y no va por debajo y eso no deja bajar la pagina.. Ayuda porfavor, gracias

  18. Hola. Me funciona y todo. Pero tengo un problema. Me queda una gran separación entre lo paneles de control (siguiente, iniciar, etc.) y las imágenes he sacado el vinculo de el documento css y sigue igual. Vi si hay algún párrafo en el código HTML pero no hay nada. Podrían Ayudarme?¿

  19. amigo me paso un problema despues de poner lo que es el codigo string donde ponemos para que nos salgan los numeros en azules me arruina la imagen ocea no se ve toda la imagen de abajo ocea abajo donde sale previous y next como que me corta un poco de la imagen de abajo!!
    no se si me puedes ayudar a como solucionarlo de ante mano muchas gracias!!

  20. Buenas tardes. Tengo un problema. No me funciona este codigo:
    <script>

    $(function(){
    $(".slides").slidesjs({
    play: {
    active: true,
    // [boolean] Generate the play and stop buttons.
    // You cannot use your own buttons. Sorry.
    effect: "slide",
    // [string] Can be either "slide" or "fade".
    interval: 3000,
    // [number] Time spent on each slide in milliseconds.
    auto: true,
    // [boolean] Start playing the slideshow on load.
    swap: true,
    // [boolean] show/hide stop and play buttons
    pauseOnHover: false,
    // [boolean] pause a playing slideshow on hover
    restartDelay: 2500
    // [number] restart delay on inactive slideshow
    }
    });
    });

    Yo guardo los archivos html como php, afecta en algo?

Comments are closed.

Copyright © All rights reserved. | Newsphere by AF themes.