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

Share on Pinterest
Comparte con tus amigos










Enviar

Uno de los elementos mas utilizados en sitios web de productos son los Sliders, mejor conocidos como Slideshows, que como quizás ya sabrás son contenedores de imágenes que cambian de 1 en 1 cada cierto tiempo.

Hoy vamos aprender como hacer un slideshow e implementarlo en nuestros sitios web, esto lo haremos con HTML, CSS y un poco de Javascript.

Demo del Slideshow: http://falconmasters.com/demos/slideshow/

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

Estructura de nuestro Slideshow:

Código CSS:

Código Javascript (Recuerda ponerlo al final de tu documento, antes de </body>)

Para solucionar el problema de los botones cambiados:

Para poder acomodar los botones correctamente vamos a seguir trabajando en nuestro archivo jquery.slides.js y vamos a modificar las siguientes lineas de la siguiente manera:

Linea 118

Linea 124

Lo unico que hacemos es en realidad cambiarlas una por otra, después de esto ya nada mas agregamos nuestras clases del icono.

Recursos Utilizados:

SlideJS: http://www.slidesjs.com/

IcoMoon: http://icomoon.io/app/

Jquery: http://code.jquery.com/jquery-1.9.1.min.js

Comprimir el peso de tus imágenes para slideshow

Share on Pinterest
Comparte con tus amigos










Enviar

FalconMasters Carlos Arturo

  • jeanechabaudis

    Gracias Carlos Arturo por el aporte, bueno aunque ya lo habia logrado pero me aclaraste algunas dudas , te lo agradesco :)
    sigue asi geek !!

    • Muchas gracias a ti por leer el articulo, nos vemos pronto por aquí :D

  • querido Carlos Arturo soy Daniel valdez de Necochea Bs As. te el script
    que modifique del jquery.slides.js para que los botones next y previus
    se inviertan desde el renglon 116 a 130

    if (this.options.navigation.active) {
    nextButton = $(““, {
    “class”: “slidesjs-next slidesjs-navigation icon-next”,
    href: “#”,
    title: “”,
    text: “”
    }).appendTo($element);
    prevButton = $(“
    “, {
    “class”: “slidesjs-previous slidesjs-navigation icon-previous”,
    href: “#”,
    title: “”,
    text: “”
    }).appendTo($element);

    }

  • Alejandro

    muy buenos tutoriales, mi observación es la siguiente: por que en lugar de hacer un script para invertir los botones cambian de posición las declaraciones en el jquery.slides.js? hay alguna diferencia? perdón aún soy novato en esto. Saludos!

  • Wed

    Muchachas Gracias por el aporte :) .. Ando intentando en poner texto a las imagines claro pero que quede bien posicionado :D

  • Erick

    Oye, tengo un problema en cuanto a los iconos a la hora de implementarlos en el jquery.slides.js. Hago paso a paso, elimino el texto de “Previous” “Next”, “Play” y “stop”, y luego de haber descargado los iconos de icoMoon, agrego los nombres aquí “class”: “slidesjs-next slidesjs-navigation icon-arrow-right2 “, pero la parte de abajo del slideshow se queda en negro y no aparece ni el texto ni el icono. Ayuda Porfavor!

    • Ok, el texto no aparece porque lo has borrado y los iconos porque probablemente no los enlazaste atu documento html correctamente, revisa bien en que carpeta están los iconos y su ruta.

  • Otniel Cruz

    Muchas gracias por el aporte me sivio un monton, una pregunta como modifico la numeracion no deseo que salgan los numeros sino unos circulos como viene en la pagina del slider

    • Josue Orozco

      Puede que no sea lo que buscas, pero la otra opción que vi factible era de ponerle un

      .slidesjs-pagination-item {

      visibility:hidden;
      }
      así no veras el conteo pero tampoco sabrás cuantas imágenes tienes.

  • Silvia Porras

    No se me crea la galería porque el sitio: “http://code.jquery.com/jquery-1.9.1.min.js” no direcciona pues ha sido movido o reemplazado y sin esa dirección donde tu indicas no puede crearse el slide… ayuda :(

  • bsetes

    Muchas gracias, me sirvió de mucho, lo único que tuve que modificar alguna cosa ya que no quería los botones de reproducción y navegación.

  • Angela Maldonado

    Hola Gracias, ya pude poner el slideshow en nuestra pagina (de la iglesia), ahora solo falta que me ayudes para como puedo poner la pagina en la web… jijiji no mas… Dios te Bendiga. XOXOXOXOX

  • Alex Flores

    Cómo cambiar la numeracion por radio buttons y Felicidades buen tutorial

  • Jorge

    Hola, por qué si no coloco las siguientes línea:

    * {
    margin:0;
    padding:0;
    }

    El menú de navegación no me cuadra con el de paginación?

  • Pedro

    Nesecito ayuda estoy trabajando con adobe dreamwawer y llegue hasta donde si inserta el script para subir el archivo js cuando lo subo me da error esa linea y no me produce la navegacion de imagenes

    • Intenta con un editor de codigo, dreamweaver aveces actúa muy raro

      • Pedro

        gracias.

      • Pedro

        ¿que editor utiliza tu?

        • Sublime Text 2

          • Pedro

            gracias me sirvió de mucho el tutorial estoy haciendo una pagina para una iglesia cristiana pero apenas estoy aprendiendo y me gustan esas cosas de slidchow los menus desplegable que tu haces http://www.avivamada.com/slideshow/index.html esto fue lo que hice aho necesito tu ayuda quiero montarle algo encima unas imagenes png (logo) y un menu dentro de una franja negra con 50% de tranparencia. Estube tratando con dreamwawer con divPa pero no pude me puedes orientar

          • Pedro

            Muchas gracias Carlos por el tutorial me sirvio de muchos esto fue lo que hice http://www.avivamada.com/slideshow/index.html pero quiero que me ayudes en algo estoy haciendo una pagina para una iglesia cristiana nesecito montarle a ese slideshow un imagen de png es un logo, una franja azul que quede menos de la mita del slideshow con una tranparencia de 50% 60% con un menu encima del slideshow los estuve intentado con dreamwawer con DivPa pero no funciono, quiero hacer mas o meno esto http://madattv.wix.com/copia-de-avivamada me puedes ayudar

  • Luis Ruiz

    Estimado Carlos Arturo, mi nombre es Luis Ruiz y son una persona de la tercera edad autodidacta, me llamó la atención confeccionar el slideshow de su tutorial, he visto la dificultad con los botones de previus y next, traveseando encontré este cambio y me funcionan en la dirección correcta, esto es desde la línea 116 a la 130. Espero sea útil.

    if (this.options.navigation.active) {
    nextButton = $(““, {

    “class”: “slidesjs-next slidesjs-navigation icon-arrow-right”,
    href: “#”,
    title: “”,
    text: “”
    }).appendTo($element);
    prevButton = $(“
    “, {
    “class”: “slidesjs-previus slidesjs-navigation icon-arrow-left”,
    href: “#”,
    title: “”,
    text: “”
    }).appendTo($element);
    }

  • Luis Ruiz

    Estimado Sr. Carlos Arturo, mi nombre Luis Ruiz, soy de la tercera edad y autodidacta, me llamó la atención su tutorial para el slideshow y encontré esta solución que me está funcionando en mi prueba perfectamente, o sea los botones trabajan en la dirección correcta, para ello deben copiar lo siguiente a partir de la línea 116 y hasta la 139. Espero haber puesto un granito de arena en la cooperación con mis semejantes. Slds.
    if (this.options.navigation.active) {
    nextButton = $(““, {
    “class”: “slidesjs-next slidesjs-navigation icon-arrow-right”,
    href: “#”,
    title: “”,
    text: “”
    }).appendTo($element);
    prevButton = $(“
    “, {
    “class”: “slidesjs-previus slidesjs-navigation icon-arrow-left”,
    href: “#”,
    title: “”,
    text: “”
    }).appendTo($element);
    }
    $(“.slidesjs-next”, $element).click(function(e) {
    e.preventDefault();
    _this.stop(true);
    return _this.next(_this.options.navigation.effect);
    });
    $(“.slidesjs-previus”, $element).click(function(e) {
    e.preventDefault();
    _this.stop(true);
    return _this.previous(_this.options.navigation.effect);
    });

  • Pedro

    Muchas gracias Carlos por el tutorial me sirvio de muchos esto fue lo que hice http://www.avivamada.com/slideshow/index.html pero quiero que me ayudes en algo estoy haciendo una pagina para una iglesia cristiana nesecito montarle a ese slideshow un imagen de png es un logo, una franja azul que quede menos de la mita del slideshow con una tranparencia de 50% 60% con un menu encima del slideshow los estuve intentado con dreamwawer con DivPa pero no funciono, quiero hacer mas o meno esto http://madattv.wix.com/copia-de-avivamada me puedes ayudar

  • Josue Orozco

    Esta es mi solución, al menos en lo personal me parece buena =3 lo único malo es que si son muchas imágenes no dará el espacio pero creo que aún así funcionaría para unas 10 imágenes.

    Html editor: Brackets (con Emmetio wiiiiiiii =3 )

  • Pedro

    Como Hago para ponerle texto a las imágenes

  • alberto

    Hola Carlos Arturo te queria preguntar si este slide es muy complicado hacer responsive ya que no tengo mucha experiencia y busco un slide como este pero no se si será muy complicado responsive.Gracias

    • Este slide ya es responsive por si mismo :)

      • Michel Andres Parra Laroze

        Hola Carlos, excelente tuto, tengo una duda, con respecto a lo que es responsive… mi slideshow se ha hecho perfectamente, lo que pasa es que le agregue texto, pero las imagenes cuando hago una redimension en el explorador, se me ocultan debajo del texto y de la barra de controles… ¿que puedo hacer?

      • Michel Andres Parra Laroze

        asi es como me queda.

  • Cesar Ruiz

    Gracias por el tutorial, disculpa. si quisiera otro elemento en vez de los números, que tendría que hacer.

  • Eder

    Podrian hecharme una mano. Me he hecho loco desde CSS, buscando la forma de resolver, Sucede que tengo una barra fija en el top que cruza al 100% de la pagina, y cuando hago Scroll la fotografia alojada en el Slideshow bloque la visibilidad de la barra, es decir si pociciona encima de la barra. Alguien sabe que propiedad agregar o modificar? las imagenes estan en formato Jpg. que estoy haciendo mal?

  • Eder

    Podrian hecharme una mano. Me he hecho loco desde CSS, buscando la forma
    de resolver, Sucede que tengo una barra fija al 100% de ancho en el top y un banner y menu fijos en el top de la pagina, y cuando hago Scroll la fotografia alojada en el
    Slideshow bloquea la visibilidad de la barra, es decir se posiciona
    encima, cuando deberia ocultarse. Alguien sabe que propiedad agregar o modificar? El slideshow esta dentro de un DIV que el contenido si se esconde atras del top barra y menu, pero el contenido del slide pareciera estar solido, las
    imagenes estan en formato Png. que estoy haciendo mal?

    • Alexis Salazar

      puede ser que el menu. en sus estilos css tenga un position:fixed; esto hace que se haga fija y pase sobre todas las cosas y puedes cambiarlo por un position:absolute; que hace quede hasta arriba y respete el espacio… Otra manera podria ser que agregaras saltos de linea en blanco antes del slideshow jaja dependiendo al ajuste

      • Eder

        sabia, que alguien me hecharia la mano. ya vere que puedo hacer con esas indicaciones, porque no he podido resolver este problema.

      • Eder

        Hola, position:absolute soluciono parcialmente el problema. gracias. tenia que manejar los z-index de los objetos. ahora solucionado gracias.

    • Eso lo resuelves con la propiedad z-index: http://www.falconmasters.com/css/propiedad-z-index/

      • Eder

        Muchas gracias, Habia abandonado el diseno original. ahora lo he resuelto gracias a tu soporte. Saludos.

  • matias gomez

    Hola Carlos, excelente tuto, la verdad q m fue de gran ayuda gracias por tu aporte, te queria consultar ya m funciono a la perfecion, tengo un html con un menu horizontal e inserte abajo este deslizable pero al momento de desplegarse el menu se va atras del deslizable…quisiera saber si se puede poner el menu por el frente…saludos

  • César Meyhuey E

    Tengo un problema lo q pasa es q la barra de navegacion esta separada del slider.. y no encuentro como solucionarlo

    • Abraham J. Chavez Ramirez

      yo tengo el mismo problema jaja

    • Abraham J. Chavez Ramirez

      Hola amiga ya lo puede correjir ggg :

      en el jquery.slides.js en el renglón 9 te de una altura un heigth modificalo según tu diseño yo lo puse a 400 y ya que do solo actualiza … salu2

  • Guest

    aqui esta la imagen

    • Milton Aguilera

      tengo el mismo problema :(

    • Abraham J. Chavez Ramirez

      Hola amiga ya lo puede correjir ggg :

      en el jquery.slides.js en el renglón 9 te de una altura un heigth modificalo según tu diseño yo lo puse a 400 y ya que do solo actualiza … saludos

  • Kevin Martinez

    hola tengo un problema como hago para que mi menu de mi diseño responsivo me salga en frente y no detras del slider

    • Eso lo resuelves con la propiedad z-index, aquí un tutorial: http://www.falconmasters.com/css/propiedad-z-index/

    • May McFly

      Hola, me podrias ayudar, mi problema es que dnd va la palabra menu esta despegado, pero si yo en el css comento dentro de .contenedor { /*margin: 0 auto;*/} sale hacia la izq pero todo el contenido de la pagina se va a la izq

    • May McFly

      hola me puedes ayudar, como hacer que el menu este completamente a la izq

      –Saludos

  • ernesto

    Querido Falcon implementé este proyecto en una página y el slideshow se superpone en el header dinamico el que esta fijo en la pantalla como lo puedo arreglar?

  • Carla

    Buenas!
    Muchas gracias por el Tutorial Carlos, me fue de gran ayuda.
    Mi problema es el siguiente. El slide se ve correctamente en varios dispositivos y buscadores, excepto en el buscador Explorer, en el cual, las imagenes que lo componen se ven desplegadas y me generan una superposición con el bloque de texto que tendría que estar por debajo del Slide.

    ¿Hay alguna forma de poder hacer que funcione también en Explorer o de que el bloque de texto que esta superpuesto,esté abajo de las imágenes del Slide para mantener una armonía en la lectura?

  • Harold Rivas

    Amigo, un gusto saludarte, he revisado todos los comentarios y no he podido solucionar el problema de los botones que me queda muy abajo de las imagenes y he leido que es por el tamaño de las fotos, las que utilice son de 400 de alto, como puedo solucionarlo. Muchas Gracias, espero tu respuesta y muy buenos los tutoriales

  • Lex Designer

    Me a servido mucho pero tengo un problema y no se como solucionarlo AYUDA!

    • Angel Gabriel Zayas B

      .slidesjs-pagination {
      background:#424242;
      list-style:none;
      overflow:hidden;
      margin: 0px;
      }

      solo tienes que agregar un margen de 0px y listo y si los botones del lado derecho estan mas grandes cambia su tamaño como en el video SUERTE ;)

      • Johan CG

        Tengo el mismo problema, y ponerle un margin de 0px no soluciona nada ¿alguien me puede ayudar?

      • Paulo

        Funka!! Agradecido amigo!

  • Marcewol

    Muy bueno , Te felicito XD

  • Agustín Sardón

    En primer lugar felicidades por el blog y darte las gracias por tan buen aporte. En segundo lugar quería comentarte que se puede solucionar el problema de los botones de navegación cambiados al flotarlos. Todo lo que hay que hacer es en la opción “navigation(object)” de la API poner la opcion “active” a false, y añadir tú los botones de navegación en el html. Hay que hacerlo justo despues de la última imagen contenida en el div.slides, teniendo en cuenta que primero va el botón next para que flote antes que el prev y se sitúe más a la derecha que el prev, luego el botón prev y finalmente el play.

  • Agustín Sardón

    Es decir sería esto:

    Next
    Previous

    El primer a, Next, flotará antes que el Prev y por lo tanto se situará bien, a la derecha de Prev

  • Marilyn Oviedo

    Muy Buen Trabajo pero demasiado Alto!

  • Carlos Medina Raymundo

    Esta Muy bueno
    Pero tengo este problema cuando le doy hypervinculos a las imágenes se deforma y mas aun cuando le bajo a un 70& .slides img { y .slides.

    quiero que se pueda cambiar de tamaño de forma proporcional.

    Codigo modificado en estilos.css
    .main {
    width:70%;
    max-width:1000px;
    margin:20px auto;
    }
    .slides {
    width:70%;
    }
    .slides img {
    width:70%;

    código modificado en index.html

  • Maximiliano

    HOla Arturo tengo este problema ¿porque la barra inferior no le llega a los botones?

    • Jose Obdulio Rivas

      hola amigo solo modifica el estilos.css de la siguiente manera:
      .slidesjs-navigation{
      background:#000;
      color:#fff;
      text-decoration:none;
      display:inline-block;
      padding:6px 20px; (aqui como por ejemplo) 10px 20px para agrandar o hacer mas chicos los botones
      float:right;

  • José Ramón Robles

    Muchas gracias, Falcon Masters

  • Lester

    Hola Carlos muchas gracias por tus tutoriales sol de verdad excelentes. He estado teniendo problemas con el slides, resulta que lo hice con las imágenes que usas en tu tutorial y todo perfecto, pero he intentado utilizar imágenes mas pequeñas y me queda un espacio entre las imágenes y la barra, al parecer se queda con el tamaño de las imágenes anteriores . Te agradecería si pudieras ayudarme a solucionar este problema. Muchas gracias de antemano.

  • jose coy

    Hola Carlos, tu slide me funcionó perfectamente pero tengo una duda acerca de como colocarlo full width en la web, se puede ?

  • j0hanfak

    como le agrego un captions al slide

  • Josue Santiago

    Tengo un problema me queda ese espacio en blanco debajo de mis imagenes, casi sobre el texto

    • M Gonzalez Gonzalez

      No se que estoy haciendo mal..ningun icono carga!!!hay que llamar la clase? o algo?

  • gustavo cardenaz

    Me puede ayudar a solucionar este problema por favor, es que la página que estoy haciendo es un proyecto escolar.
    Lo que sucede es que la barra me aparece muy abajo, las medidas de las imágenes que use es de width=”1366″ y height=”261″
    Anexo la imagen.

  • Jorge Baldenebro

    Hola , quisiera porfavor que me ayuden a decifrar porque me sale este error a la hora de inspeccionar elementos en mi navegador, ya que con eso no me permite crear el slideshow

    • Alex Rayo

      tenés el mismo error q uno de arriba, el link del script está mal, fijate q lo escribiste invertido: no es “scr” es “src”

  • Patricio PEP

    Estimado Carlos tengo un problema: no me carga los iconos es el slideshow.
    No puedo identificar donde está el error, revise todos los enlaces y estan correctos.
    Hay algo que no está funcionando… Desde ya gracias por todos tus aportes!

    • Ricardo Melgarejo

      pudiste resolverlo??

  • Patricio PEP

    Estimado Carlos, antes que todo muchas gracias por tus aportes.
    No se si es posible que el slideshow tenga simbolos en vez de números? Por gusto estético meramente… Muchas gracias!

  • Aldo Ortiz

    hola Carlos , tengo un problema. veras sigo todo tu video al pie de la letra pero cuando justo llego ala parte donde se visualiza ya el efecto del slideshow no me aparece, las imágenes que utilizo se quedan una debajo de otra y no me aparecen los botones de navegación. ¿ que puedo hacer? aquí te dejo una imagen del código espero puedas ayudarme de antemano muchas gracias.

    • Assasin Metaler

      A mi me pasa lo mismo :/

    • Alex Rayo

      el link del script está mal, fijate q lo escribiste invertido: no es “scr” es “src”

    • Diego Palomares

      te faltó escribir lo de la función

      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

      }

  • Emilio Pastor del Castillo

    Muchas gracias por tus tutoriales, son Geniales, tengo el mismo problema que veo en algunos post, en mi caso he puesto imágenes con mas largo que alto y deja un espacio con los controles de paginación, al igual he probado cambiar el height en slidesjs-container y en el slidesjs-control, pero nada, tambien he probado con vertical-align:top… al final creo que deben ser imagenes con una proporción de 1077 x 605 px. …bueno sigo con ello, nuevamente muchas gracias por tus videos que nos ayudan a sumergirnos en el mundo de la programación web

  • Alex Rayo

    Muchas gracias Carlos-sensei, excelente tutorial!!!

  • Israel Picasso

    no me sirve no se me activa alguna solucion

  • Paulo

    Para los que no les funcionaron correctamente los ICONOS (casillas negras y/o símbolos extraños).. prueben abriendo el archivo fonts.css y en el @font-face agregar dos puntos y una barra diagonal antes de la palabra fonts (../fonts/), de esta forma… A mi me resulto perfecto… Saludos desde Chile!

    PD: Excelente tutorial amigo!!

    • Aldair Cayetano

      oye y si no me funciona asi como puedo realizarlo de otra forma me podrias ayudar

  • Jordan Leon

    pos que mal no me quiere cargar
    .slidesjs-pagination {
    background:#424242;
    list-style:none;
    overflow:hidden;
    }

  • Jordan Leon

    Hola Carlos A.

    Mira estaba tratando de hacer el codigo css con el video y no me salio en esta parte

    .slidesjs-pagination {

    background:#424242;

    list-style:none;

    overflow:hidden;

    }

    luego copie todo el codigo que aportas de css e igual no me sirvio sale la lista pero sin estilos

  • Jordan Leon

    D:

  • May McFly

    Hola, carlos porque la imagen del slide no respeta la position: fixed, a la imagen en .slides img { z-index:0; } le agregue el z-index pero no me funciona, alguna idea que puedas darme

    –Saludos

  • Samuel Reyes

    podrian ayudarme soy nuevo en esto y necesito mucha ayuda y no me sale como deberia

    INDEX…………….

    sli

    $(function(){

    $(“.slides”).slidesjs({

    });

    });

    ESTILO………………………….

    * {

    margin:0;

    padding:0;

    }

    body {

    background:#f2f2f2;

    }

    .main {

    width:90%;

    max-width:1000px;

    margin:20px auto;

    }

    .slides {

    width:100%;

    }

    .slides img {

    width:100%

    }

  • Rodrigo Parra

    hola, exelente aporte. a me anduvo tod de 10. pero quisiera cambiar la numeracion de las paginas por circulitos. como hago??

  • Rubi Galan

    Hola, necesito que me ayudes con la pocision porque no se centra y aparece al lado izquierdo. porfavor :(

    • Raymundo Rodriguez

      Quiza no pusiste el
      .slides img{
      width:100%
      }

      A mi se me habia olvidado y po eso no se centraba

    • juan Carlos

      text-align: center

  • CaramelaChan

    Hola Carlos, primero que nada muchas gracias por tus excelentes tutoriales, me han servido y he aprendido mucho! Te escribo porque al modificar los nombres de los Botones de “previous” y “next” aunque guarde no pasa nada, me sigue mostrando los nombres e inglés, a qué se deberá esto? Habrá alguna solución! Muchas Gracias de antemano, espero tu pronta respuesta <3

  • jorge espitia

    disculpa amigo. bueno de antemano gracias por los aportes

    oye quisiera saber como poner informacios css o .js en un link
    me puedes decir

    digamos algo asi:

    http://nitrojimdo.blogcindario.com/ficheros/desingwork/mootools-1.2.1-core.js

    te agradeceria mucho la ayuda y me salvarias de mucho
    saludos

  • Edwin Abel Peñalba Bonilla

    Al momento de colocarlo en tamaño para dispositivos celulares los números del slides se pasan abajo alguien lo soluciono ?

    • luis adriano g.e.

      hola amigo lo llegaste a solucionar?

      Gracias.

  • Ricardo Melgarejo

    Alguien pudo solucionar el tema de los iconos de “play, stop, sig. ant” ?? cambie las rutas 50 veces y ya no se q hacer..

  • Elder Bejarano

    Hola, amigo para convertirlo en responsive , se puede?

  • Mary Garcia

    hola disculpen me pueden ayudar tengo el codigo como esta pero al momento de actualizar la pag no me sale para cambiar las imagenes me siguen saliendo asi si me podrian decir que es lo que esta mal se los agradecería :D

    • Kershing Flores

      Segun puedo ver en la primera imagen que hay donde declaras la clase slide se te olvido colocarle el igual(=) tu lo tienes asi:

      deberia de ser:

    • Pri camacho

      como lo resolviste??? yo tengo el mismo problema

  • Ammbar St

    Amigo igual modifique los botons pero ahora no se ven los botones de siguiente,pausar, etc.. si estan ahi pero no se ven, ayudaaaaaaa :(

  • Ali

    Muy buenos tutoriales, solo tengo algo que preguntar, como puedo hacer para hacer el codigo javascript en un archivo externo, he intentado pegarlo y conectar al archivo externo, pero nada, algo de ayuda por favor

  • Ivo Francisco Gonzalez Morales

    ¿Alguien me puede decir qué hice mal? La única diferencia es que yo usé links de imágenes diferentes, y lo he copiado todo al pie de la letra (según creo) ¡ayúdenme por favor!

    • Pri camacho

      como lo resolviste??? yo tengo el mismo problema. lo copie tal y como esta y no me sirve

  • Aldair Cayetano

    hola que tal, eres el mejor en esto amigo oye este tuve un problema sobre agregar los iconos seguí tus pasos y no me salen aun no se si tu podrías ayudarme con esto

  • JAIRO A PINEDA

    hola, quien me puede ayudar a modificar las medidas del slideShow. quiero que tenga 1300 * 600. Ya intente de todo y no puedo
    ayuda por favor

  • Yermani

    Buen dia, gracias Carlos por tus aportes. Todo me resulto bien, realice varios ajustes y al final me quedò este error que no he podido solucionar, el sombreado oscuro no llega hasta el borde, te agradezco cualquier orientacion.

  • Franyer Bochaga

    esta muy bueno pero la barra inferior donde estan los numeros no se pega a las imagenes y queda un espacio en blanco y se ve muy feo.

  • Marco Misael Mota Mendoza

    yo tengo el problema de que se me coloca a la izquierda y no se como centrarlo alguie me puede ayudar?

  • Maximiliano Heredia Santoyo

    Hola quisiera saber como puedo agregar texto sobre el slider y que este cambie junto con las imágenes?

    • Maximiliano Heredia Santoyo

      Ya lo resolví…

  • Eduardo Vargas Colloy

    les recomiendo que si no quiereis dañar alguna programacion de su pagina haceis otro tag de body para que los archivos no estais dentro del body en donde estais su mayor programacion si es que me entiendeis, a mi me a paso que el body background no respondia a el comando al ponerle la imagen de background.

  • Eduardo Vargas Colloy

    Aunque eh encontrado una solucion quitarle el
    body {
    background:#f2f2f2;

    }

    al archivo estilos.css y asi tieneis su imagen o color de background que tieneis puesto en el archivo html index

  • Carlos Sil

    Saludos, tengo un problema, no me funciona con explorer, pro con chrome me va bien.

  • Gastón

    Hola Estimado. Gracias por tus aportes, te hago una cosnulta, se puede agregar texto en el slide?

    • Obristein

      Creo que si, encerrando cada imagen en un Div y en el agregar texto :D

  • Gastón

    agrego un ejemplo: http://www.calzadosantafe.org/

  • Brenda M.

    Hola! Muchas gracias por el excelente tutorial, solo tengo una pegunta.
    ¿Porque el slide no me funciona cuando acceso desde dispositivos ios?
    Gracias!

  • Ludwick Galvez

    Dude mil gracias enserio!!!!

  • lorena

    hola soy lorena y tengo un problema y no se como arreglarlo me podrían ayudar

    • Alfonso Cruz

      la imagen es pequeña, creo.

  • Mateo Acosta

    Tengo todo como dicen hay, pero llego ahì y no se cuadran mas y la imagen queda muy grande necesito ayuda

  • Mateo Acosta

    y este es el estilo css tambien esta al pie de la letra

  • Gerardo Benjamín

    Como puedo hacer un slider como fondo en mi pagina web? :o

  • He Van

    Buen dia, me gustaría saber si los materiales aun siguen disponibles ya que he realizados los pasos varias veces pero en la parte de js se al parecer no lo liga, ya descargue los archivos .js asi como ligue mi html al js que esta en la pagina pero mi slider sigue sin hacer nada solo se ven las tres imagenes

  • Harold Alejo Castillo

    y cómo podriamos convertir los numeros de ‘pagination’ a algun icono ?

  • jimmy77

    hola necesito una ayuda, tengo un slide y sobre el necesito colocar una imagen ng del logo en el cento. como hago ayuda

  • Yohimar Sebastian Nieto

    tengo un problema al intentar poner los iconos del slider no se que pasa

  • Yohimar Sebastian Nieto

    tengo un problema al intentar poner los iconos del slider no se que pasa con el codigo no se que es lo que me falta

  • Walter Saravia

    me pueden ayudar nose como unir los botones con l banner porque lo quiero hacerser a otra medida

  • Alejandro Akino

    Hola mi estimado Carlos Arturo … Fijate que tengo el problema en cuanto a los numeros, los quiero cambiar por un icono de un círculo … Pero no se como quitar los números ya que he colocado el nombre del icono por ahi por la linea 174 mas o menos… En una clase, dice que es para los

  • Alejandro Akino

    Hola mi estimado Carlos Arturo … Fijate que tengo el problema en cuanto a los numeros, los quiero cambiar por un icono de un círculo … Pero no se como quitar los números ya que he colocado el nombre del icono por ahi por la linea 174 mas o menos… En una clase, dice que es para los

  • Cano Kano

    hoja carlos una pregunta como hago para que empiece a rotar las imágenes automáticamente a nomas inicia la página sin tener que darle a botón de play gracias

  • Sme Angeles

    Como puedo dimensionar el tamaño del slideshow??

    • distancia2

      usando css y le estableces un tamaño con la propiedad width y height

  • PauGui Edd

    como hago para cambiarle el efecto de slide?

  • PauGui Edd

    como cambio el efecto de slider?

  • Alex Preciado

    Hola buenas Carlos Arturo, queria preguntarle si podria ayudarme con un problema que tengo con el slideshow, de mi web. En la parte inferior donde deberia salirme la barra de navegacion no me aparece nada. ¿Que puedo hacer?

  • valentikary

    En el video comentas que con max-width puedes darle el ancho al slide, pero al querer darle un height no lo acepta, hay alguna manera de redimensionar el slideshow?, saludos y gracias por el video.

  • valentikary

    Como puedo rediseñar el slideshow, para ponerlo en 900 x400 Ejemplo gracias por el tuto.

  • Nani Reira

    ¿Cómo hacer que al pasar el mouse arriba del botón 1, 2 o 3 cambie la imagen en el slider sin necesidad de hacer click?

  • Christian Hidalgo

    Alguien me puede ayudar, no me aparecen los botones del slideshow…???

  • Amanita

    Hola Carlos, ¿podrías enseñarnos a hacer un slideshow como fondo de pantalla de web? Algo tipo esto: http://bartaile.com/
    Tengo entendido que está muy de moda y me iría súper bien aprender a hacerlo para mi web, pero no he encontrado ningún tutorial decente en español. ¡Muchas gracias!

  • Jesus Morillo

    Amigo tengo problemas con los slide no me salen los botones para cambiar la imagen y siguen una debajo de la otra, que puedo hacer? te lo agradeceria mucho

  • Gilbert Mora

    Saludos.
    Como puedo hacer para que el Slide sea mas pequeño? Que se vea con en la paginas que solo esta en la parte superior y alargado

  • Anael Dominique

    Hola Amigo, El slides Ya no funciona o como le hago para conseguir esos archivos :b

  • graciela

    hola Carlos Arturo, que tal, de donde puedo descargar el archivo slidejs, el enlace que tienes no funciona. gracias

  • Toni Martorell

    Hola. A mi no me ha salido. A ver si alguien puede decirme por que. Lo que me queda es una imagen sobre la otra (yo en lugar de utilizar 3 he utilizado 5, no creo que sea el problema, y al final de la ultima foto me sale esto: $(function(){ $(“.slides”).slidesjs({ }); }); ¿Que he hecho mal?

  • Cristian Andres Gonzalez

    Tengo un aporte … este programa sirve para reducir el tamaño hasta de 100 imagenes …. FILEminimizerPictures

  • Cristian Andres Gonzalez

    hola podrían ayudarme con esto lo que pasa es que cuando cargo varias imágenes se me amontonan los números como hago para que no pasen a la parte de abajo cuando minimizo un poco la pantalla o cuando cargo mas de 10 imágenes?

  • Cristian Andres Gonzalez

    esta es otra pagina

    • juan Carlos

      Amigoooooooooooooo como estas como pudiste solucionaar ese problema, me pasa lo mismo, en dispositivos moviles o tablets se ponen asi mismo como se puede solucionar :(

  • Anahis Mercedes Alvarez De Leo

    Hola. Mi menú no sale completo ya que que el slideshow esta delante de el. ¿Como envío el slide hacia detrás o el menu hacia delante?

    • samuel jimenes

      En el código css de tu menú agrega en la parte de posición esto un zindex mayor asi:

      }

      .nav li ul li {
      position:relative;
      z-index: 203;

      }

      • Gracias me salvaste xd “position:relative;
        z-index: 203;”

        Sabras como achicar el slider?

  • Victor Vasquez

    gracias por el aporte, tus tutoriales me ayudan mucho para mi proyecto de TSU gracias

  • COTIZACIONES GERSA

    Que tal Carlos, tengo una duda, realice todo y localmente me funciona la animación del slides, pero una vez que la subo a mi hosting no me hace el efecto de la galeria de slides, se tiene que cambiar algo o agregar, saludos gracias.

  • Marino Hernandez Jacobo

    Felicidades por el tutorial, pero un favor soy nuevo en esto, y quisiera que las imágenes tuvieran links a distintas paginas, lo intente con un <a ref antes de cada imagen pero me duplicar los slides, odrás apoyarme con el código?

  • Indira Morales Terán

    ¡Gracias! Todo está muy bien hecho, me sirvió de mucho y me encantó.

  • distancia2

    en mi caso use el pauseOnHover y si se detiene pero cuando desplaza el scroll y vuelves a subir ya no funciona el
    pauseOnHover

  • Jose Hernandez Molina

    genial, explicaas demasiado bien

  • Bofo Rosas

    alguien que me pueda ayudar?…

  • Guadalupe Jose

    te agradesco mucho el tutorial me sirvio mucho ,
    aun que tengo un problema con el favicom
    ese lo e puesto asi como enseñas el tutorial pero no me sale

  • ronald marrero

    Hola cómo estás, antes que nada quiero dar las gracias por el excelente tutorial, de verdad que ha sido muy bueno, logré hacer el slideshow, pero tengo un problema no tengo ni idea de como subirlo a mi página web, la misma está en un hosting privado y la hice con wordpress, si tienes algún tutorial de como hacerlo te lo agradecería, lo que hice hasta ahora fue subir el slideshow, a la carpeta del tema que uso en mi web vía c-panel, pero no logré hacer más nada.

    Si me puedes ayudar con esto te lo agradezco, feliz día y gracias de antemano.

  • Tanya Espitia

    Hola
    Me gusto tu tutorial , pero se me cortan las imágenes, la parte baja de mis fotografías no aparece.
    ¿como puedo arreglarlo?

  • juan Carlos

    Hola a Todos como estan, excelente tuto :). Me pasa algo solamente y es que cuando la pagina cambia de tamaño a dispositivos moviles los numeros de el slider no se acomodan bien y quedan debajo uno del otro. Alguien pudo arreglar esto ??’

    • juan Carlos

      Ayuda Please

    • juan Carlos

      Una solucion rapida para este problema fue modificar el archivo css que controla esta numeracion, quite estos numeros con la siguiente configuracion

      .slidesjs-pagination {
      background:#424242;
      list-style:none;
      overflow:hidden;
      float:left;
      height: 0px;
      }

      Pero la idea es que los numeros sean responsive, (adaptables a los dispositivos moviles), si alguien sabe como se los agradeceria

  • Mauricio Villanueva

    Excelente Tutorial todo funciona muy bien pero me gustaría realizar una modificación que el “slidesjs-pagination” quede centrado debajo de las imagenes quitando el “slidesjs-navigation” del next y previous. Osea que la numeración quedara en el centro alguien que pueda ayudar en eso?

  • David E. Reva Medellín

    Que tal Falcon, gracias por estos tutoriales que son de gran ayuda, pero me salto una duda que tal vez nos puedas ayudar. Deseo que los controles de avance y retroceso identifiquen cuando se trata de la primer imagen o de la última. ¿Cómo podría hacer esto?

  • Abraham De la Roche

    Hola Falcon, sabes que estoy colocando los iconos tal cual donde lo indicas y no me los toma, que puede ser ? SAludos desde Venezuela amigo

  • Abraham De la Roche

    Y por otra parte, quisiera agregar una clase que tengo de texto sobre las imagenes y la imagen me sale debajo del texto, cualquier ayuda seria muy buena.

  • Oscar Borjas

    Saludos Carlos Arturo me parece genial la labor que realizas, tengo una consulta en el caso de que tenga muchas imágenes para mi slide, la cinta de números se hace muy grande y ocupa varias filas deformando el menú del slide que recomendarías hacer en este caso,

  • Daniel Isai Martinez Hernadez
  • Fernanda Roja

    Hola Carlos, me haz salvado la vida varias veces con tus tutoriales :) gracias…. tengo un problema y espero que me puedas ayudar, hice una página con el menú responsive de tu tutorial y en la pagina de inicio puse el el slide show pero cuando quiero abrir el menú el slide esta sobre el :'( y no se que hacer

    • Edson Rodriguez

      tuviste alguna solucion a este problema fernanda me paso lo mismo

  • Guille Parra

    hola me pueden ayudar con el codigo siguen las imagenes para abajo al rato de hacer lo del slideshow no me funciona… me pueden ayudar… Gracias…

  • Speak English Now

    Amigos yo estoy creando una slideshow de imagenes, sin embargo las imagenes me salen muy pequenas en el slider, quisiera poder automatizar el tamano de la imagen que no importa el tamano se ajuste al tamano de del slideshow. Gracias por su auda.

  • Juan Esteban Echeverry Perdomo

    https://uploads.disquscdn.com/images/58a9cd74d7ffee5757d2849b1387ffa31115320e27e18e10a599248d1b8d7932.png tenego un error de que se me presenta en el slideshow un espacio y no se pega la barra de los iconos a las imagenes

    pd:ayuda!!!

    • Morel Ahmeed Adanaque Zevallos

      Para encajarlo correctamente hay que modificar el archivo jquery.slides.js en las primeras lineas de código vienen el alto y ancho por defecto del slider solo modifica el alto (height) hasta que quede perfecto.

  • Oscar Borjas

    Saludos Carlos excelente tuto, muy bien explicado, tengo problemas en modificar el alto, estoy usando una imagen mas pequeña para ajustarla a mi sitio pero, pero queda un espacio entre la imagen y los botones, ya no se cual height debo modificar para ajustar. Muchas Gracias de antemano

  • CUM Claret

    saludos genial tu tutorial. para mi todo perfecto sin embargo tengo un problema de aprendiz. como hago para que se reproduzca automáticamente. que al entrar a la pagina se reproduzca de una vez. sin tener que darle play. saludos. y espero me puedan ayudar de antemano gracias.

  • Alexander

    alguien me dice como poner envés de los números, puntos jejee seria de ayuda porfavor

  • Brenda Janeth Piñón

    Hola, a mi se me presenta este problema con la barra que los números y del play no están alineadas, las imágenes se cortan y no se ponen completas y además quisiera saber si se pudiese que en lugar de numeración se pudieran https://uploads.disquscdn.com/images/e0c8c0cb744e02fc2295ac13d343f37023f2592229dbcb0299fb7601b0d75f52.png arreglar círculos o algún otro símbolo, gracias de antemano :)

  • David Berumen Lozano

    oye como puedo agregar de manera dinámica utilice este método pero me los muestra a fuera

    window.onload=function(){
    var elem = document.createElement(“img”);
    elem.setAttribute(“src”, “http://itszas.edu.mx/nbcfitness/Login/galery/img/1.jpg” );

    document.getElementsByName(“abc”).appendChild(elem);
    }

  • carlos ardon

    mi slide no funciona y hize todo lo q me dijo. necesito ayuda porfa!1

  • Cristian Weinzierl

    Hola.. FalconMAster… tengo el siguiente problema y te lo remito así http://www.hexencode.cl e realizado un es slideShow tal como lo muestras aca en este tutorial, lo he pegado en mi pagina que te he dejado. pero como puedes ver la primera imagen no se carga de manera correcta. Y me muestra unos codigos. Por favor Tu ayuda. Gracias.

  • Cristian Weinzierl

    este es el error mencionado. Saludos


Aprende con nuestros cursos

Escribe CSS como un PRO, Curso Básico de SASS

Escribe CSS como un PRO, Curso Básico de SASS

Optimiza, Organiza y escribe tu código CSS como un profesional con SASS.

Inicia el curso
Curso básico de WordPress desde 0

Curso básico de WordPress desde 0

Aprende a utilizar Wordpress desde 0 y crea sitios web, blogs, galerías e incluso tiendas online.

Inicia el curso
Curso cómo hacer un Sitio Web básico con Bootstrap

Curso cómo hacer un Sitio Web básico con Bootstrap

Aprende como hacer un sitio web básico utilizando lo mejor de Bootstrap

Inicia el curso
Curso completo de Bootstrap desde 0

Curso completo de Bootstrap desde 0

Curso básico de Bootstrap, Aprende a crear sitios web adaptables a dispositivos móviles con este poderoso framework.

Inicia el curso