Slider manual infinito con HTML, CSS y Jquery

Uno de los slider más usados en diversos sitios web, sin utilizar ningún plugin.
Código mejorado: codepen.io/JyGP...
Otros sliders:
• Slider manual N° 1 H...
• Slider manual N° 2 - H...
• Slider automático infi...
• Slider automático con ...
Nuestro sitio oficial: jygproyectosweb...
Síguenos en facebook: / jygproyectosweb
Síguenos en Twitter:
/ jygproyectosweb

[@madrid29madrid]

Te he conocido recientemente y me parece espectacular la claridad y la sencillez con que explicas todo. Muchas gracias¡

[@Jygproyectosweb]

+Manu CidLanzarote Un gusto, muchas gracias

[@thesickdude4899]

Tal vez sea tarde para dejar esto, pero tu forma de explicar es impresionante. El mejor tutorial de sliders que he encontrado hasta ahora, gracias por el aporte amigo, sigue así!

[@kafarnahum103]

Estoy encantado con el nuevo formato, Es muy ilustrativo. Yo lo calificaría de documental, ja ja ja... más que un simple curso. Jean Carlo. Qué bien aprovechas tu tiempo. Y cómo nos aceleras el nuestro. Un fuerte abrazo.

[@josepmariajmmslloret5485]

Agradezco mucho estos videos. Soy nuevo en el tema, pero con tus lecciones he aprendido muchisimo. Eres un gran profesional, sabes explicar las cosas claras y precisas con el ritmo adecuado. Felicidades.

[@SuperTheink]

En este pequeño vídeo e aprendido mucho mas que con los maestros de mi ingeniería, muchas gracias por su aporte me a sido de gran ayuda.

[@XndresCxrdenxs002]

Para los que no les carga el JQuery, tengan en cuenta que la librería de JQuery debe estár en el head del HTML y segundo, el js donde estan sus scripts para la página, deben estar a lo ultimo del body para que lea las etiquetas anteriores.

[@guapisimopro4780]

no me funciona :(

[@guapisimopro4780]

¡YA ME FUNCIONO! CON EL NUEVO CÓDIGO Y TU RECOMENDACIÓN :D

[@tomymazuran3466]

@@guapisimopro4780 como hiciste para que te funcionara?

[@publicidadesruiz6918]

@@guapisimopro4780 como le isistes ami no me funciona ya descarge el JQuery y ni asi

[@ReginaldoSilvacwb]

Gracias Jean Carlos, soy de Brasil, sigo tu canal ya desde hace algún tiempo, usted es muy bueno en eso, felicitaciones! Y continúa honrarnos con su conocimiento!

[@misumi2798]

Felicitaciones desde México. Me encantan tus vídeos, he aprendido mucho gracias a ti.

[@edelacade]

GENIAL GENIAL AMIGO!! acabo de terminar el de web de cero y ahora voy por el slider!! Simpleza y estetica combinadas con una gran explicacion de las funciones. Muchas gracias hermano!

[@Jygproyectosweb]

+edelmontesano Genial! Gracias a ti

[@edelacade]

+J&G Proyectos Web Amigo como estas? Pregunta: Por que será que el recuadro que contiene al slider tiene solo el marco inferior? Es decir, en el posterior no hay ningun marco. Los laterales estan perfectos. Me explico?Gracias de antemano!

[@jkleinerguzcru7232]

Excelente vídeo, gracias soy 0 diseñador web recién estoy queriendo empezar y este vídeo es primordial para mi. Éxitos por compartir conocimientos.

[@LuisTorres-jk9qt]

Muchas gracias, es muy fácil de entender y hasta me ayudas a documentarlo, lo utilizare en un proyectito final de materia, me has ayudado mucho en estos últimos meses

[@victorhugovillarrealflores9497]

De todos los tutoriales que habia observado el tuyo es el mas completo !! GRACIAS

[@EdsonLopes_rj]

Show!!! Muito bom o tutorial, apesar de você falar em castelhano, deu para entender muito bem o passo a passo e aprender os macetes e dicas da vídeo-aula. Parabéns e sucesso.

Wuauuuuuuuuuuuuuuu esa la única palabra que se me ocurre decirte excelente con toda honestidad y humildad soy tu fan ;)

[@Jygproyectosweb]

+Ruben Maldonado Muchas gracias.

[@lycotropo]

genial!! yo estoy empezando y no se nada de jquery ni javascript sólo llevo 2 meses estudiando , explicas genial.

[@deividpolska4336]

Excelente video, como siempre; muchas gracias por explicar todos los pasos detalladamente; lo he aplicado a también a una página que estoy creando y el resultado ha sido espectacular y he aprendido mucho, éxitos amigo.

[@everrosales6786]

Hermanito, ya tienes a un suscriptor más!! tus vídeos son excelentes y la forma en que enseñas entendible y precisa. Muy bien!! sigue así y gracias por los aportes!!

[@tavoadopsadopslatamcom6938]

¡¡MUCHAS GRACIAS POR EL VIDEO!! Por si a alguien le interesa y/o le sirve, les dejo un pequeño "agregado" que hice al script. Con este pequeño script, el slide automático se interrumpe si haces click con el botón "Prev" Solo hay que agregar estas líneas en el archivo .JS, reemplazando al "setInterval": let AutoSlide = setInterval(function () { Next(); }, 2000); function StopSlide() { clearInterval(AutoSlide); } Buena suerte y, de nuevo, muchas gracias.

[@franklinllican4068]

Muchas gracias, tus videos son muy buenos, facil de entender, me ayudan mucho para mi proyecto... felicidades, sigue asi! Arriba el Perú! Te ganaste un Suscriptor!

[@skater1975]

Buen tutorial man, me costo agarrarle los detalles pero lo bueno es que entendi plenamente todo el tutorial, lo unico q me salia como error fue lo del 'strict statement' pero estuve leyendo y le pregunte a un primo que maneja python y me explico, pero de verdad buen video!!! me salio perfecto.

[@tulliman5499]

muy buenos tus vídeos, recién estoy iniciándome y gracias a ti estoy aprendiendo un montón, un saludo desde Argentina!

[@robertosaldi2009]

Estimado Jean Carlos: He llegado sin problemas hasta "transform: translateY(-50%;);" y cuando miro el navegador me encuentro con que solo uno de los botones se posicionó en el medio de la imagen, mientras que el otro se quedó debajo (donde estaba). Además, el que está sobre la imagen no está bien centrado. De ese modo, no creo que pueda seguir adelante, ya que veo que en el video muestras luego la separación de izquierda-derecha. Te pongo aquí el código del CSS correspondiente a los botones para mas proveer: #btn-prev, #btn-next { width: 40px; height: 40px; background: rgba(255, 255, 255, 0.5); position: absolute; top: 50%; transform: translateY(-50%;); line-height: 40px; font-size: 22px; font-weight: bold; text-align: center; border-radius: 50%; font-family: monospace; cursor: pointer; } #btn-prev { left: 10px; } #btn-next { right: 10px; } Te pido me digas donde me equivoqué como para poder corregirlo. Infinitas gracias.

[@antonioweb4708]

Gracias JeanCarlos. Si, te has explicado perfectamente, como siempre haces.

[@Jygproyectosweb]

Gracias Antonio

[@arielomc]

Maravilloso Giancarlo!!! super explicativo y fácil de entender el video.

[@rulosrulos5846]

Hola! Muy buen aporte, intente hacerlo para que en lugar de que mostrara una imagen el slider mostrara dos y me di cuenta de una cosa o de dos mejor, si quieres mostrar las dos imagenes tienes que tener estos estilos: #slider{ display: flex; } Nota: no es necesario marcar un width #slider section{ min-width: 48% margin 1% // con esto logramos ocupar el 100% visible del slider } Pero esto genera un problema que no logre compreder su causa y es que no podriamos animarlo mediante la opcion en el jquery de: slider.css( 'margin-left', '-100%' ) // para el que no sepa es lo mismo que slider.css( 'margin-left', '-'+'100+'%' ) Aunque si di con una solucion y es dejarlo de la siguiente manera: slider.css( 'transform', 'translateX(-50%)' ) // Y con esto te das cuenta de que puedes mostrar la cantidad de imagenes visibles en el slider que desees :D Gracias por el video!!

[@3RCREATIVOS]

yeeee, lo resolvi amigo J&G tus videos si que son bien explicados, el error lo cometia yo, no puse el simbol "#" en uno de ellos y eso era todo ahora corre de maravilla, una consulta más; podrias agregar al video para que los cambio de imagenes sean mas suaves o tenga algu efecto, estoy seguro que todos tus seguidores te agradecerian bastante. y desde ya muchos éxitos

[@carlosmab]

eres el puto amo de las explicaciones... que genial... saludos desde Venezuela

[@mauricioalonso7047]

Jajajaja eres un crack !! No tienes idea como me han ayudaron tus vídeos. Saludos !!!

[@natikomr]

¡Genial! Entendí todo, muchas gracias. Por favor, continúa con esta labor de enseñanza, tienes el don ;)

[@DanKira666]

Excelente!. Explicas muy bien, tengo conocimiento intermedio de html y css, pero jquery nada. Me ayudaste mucho hermano, me suscribo y like. Sigue así ! :)

[@mlizano6793]

perfecto! lo felicito caballero, super sencilla y facil de entender su explicacion, saludos desde Costa Rica

[@luiszabalaga3816]

Espectacular ya desde el primer vídeo que vi, te sigo y espero ver muchos vídeos mas de tu trabajo, muchas gracias

[@R1o2c3k4y5V]

gracias me enseñas mas que los maestros saludos, haces un buen trabajo.

[@juancorrea525]

Sos un capo!, no se si sea el unico que le paso pero para que me funcionara, en el archivo de js me toco encerrarlos en: $(document).on('ready',fuction(){ "El codigo explicado en el video." }); En todo caso, te felicito.

[@Jygproyectosweb]

+juan correa para evitar colocar ello, en tu html colocas el vínculo del script al final del body como lo hice en el video

[@juancorrea525]

Creó que ahí estuvo el error amigo. Gracias

[@marcosdudnik1519]

Yo puse el vinculo al script al final del body y no me funcionó, luego lo encerré en $(document).on('ready',fuction(){ y tampoco funcionó, luego cambié este último por $(document).ready(function(){ y recíen ahí funcionó.

[@tomasllannos2762]

me respondo sólo: esto me funcionó Antes no había olvidado el hhtp...solo no lo puse en el comentario.

[@josedavid2818]

Gracias, solo por esa linea de codigo no me funcionaba

[@diegopichaco9384]

que bien explicas de veras, gracias

[@Karlosss1001]

Excelente video. Muy fácil como explicas. Gracias.

[@joelrvargas9347]

Muy buena aportación ,Felicitaciones por los buenos tutoriales que haces ,de verdad eres muy bueno.Capo (Y)

[@filipoxtan]

Amigo eres muy bueno cada vez me dejas muy sorprendido con tus tutoriale, llevó todos hecho.

[@guadalupehernandez335]

Excelente video!!! :) me gusti mucho tu video es lo mejor que se encuentra en youtube sigue asi... Exito!!

[@AlexdobleU]

Amigo usted explica excelente felicitaciones y agradecido con usted

[@christianperalta9414]

Exelente! tarde siglos para lograr entender todo pero alfin lo logre. gracias por el video idolo!

[@DesaCo_57]

Como siempre otro muy buen tutorial, sin ningún desperdicio.

[@mayconxhh]

Seria genial si compartieras tu código por github! Muy buen tutorial! LIKE

[@hugoluisvilla7438]

excelente tutorial... aprendí bastante con tu ayuda... muchas gracias amigo...

[@reyshel77]

Wow, por fin he entendido todo, muchas gracias, es muy sencilla su explicación.

[@javiercastro2754]

Excelente vídeo, muy claro y sencillo, estaría genial que mostraras uno hecho solamente con javascript. Saludos.

[@PERCYHANSEL]

Excelente video, una ayuda para todo desarrollador =)

[@yamilvernet]

Sos mi nuevo héroe jaja Te ganaste un Suscriptor!

[@cccaurora]

Muchisimas gracias por tu tiempo maestro!, genial el video, la explicacion y el proyecto, TODO funciono de maravilla, genial! simplemente genial!

[@Jygproyectosweb]

+Phillip Towers Genial Phillips

[@mariaisabelvm]

Gracias por transmitir tus conocimientos. Tus videos son muy instructivos.

[@pedrosolorza4265]

Sos un grande, te amo, sabélo, +10 me suscribo, me salvaste la vida (y la carrera también).

[@teomesimc8158]

Felicidades pana esta super bueno y fácil espero que sigas trabajando en mas animaciones....... y publiques

[@AlexdobleU]

gracias, amigo felicitaciones por dedicar tu tiempo a emseñarnos

[@AngelGonzalez-ix7hx]

eres bueno hermano saludos desde republica dominicana!!!

[@GeeKBio]

Gracias por el aporte, funcionando perfectamente despues de hacerle algunso ajustes y modificaciones para adaptarlo a mi WEB.

[@jesusdanielparraurdaneta9268]

Excelente video, muy bien explicado. Saludos desde Venezuela

[@natyargen4492]

Excelente video!!! Pregunta...qué editor de códigos utilizas? Cómo haces para que a medida que escribís el código, los cambios se vean reflejados en el lado derecho de la pantalla? Saludos desde Argentina.

[@samuelg1886]

Excelente, muchas gracias

[@jahazielcarrillo516]

excelentes videos amigo, gracias por todo aporte y tiempo dedicado

[@joaquinast]

Gracias maestro, excelente video como siempre, saludos, sigue asi!

[@plutonioBMX]

sigue montando video brooo increible me salvaste el semestre

[@davidolszak9138]

Muy bien explicado!!! Me parece que te salteaste la parte explicativa de como linkear el JQuery pero no importa. Es poner pausa y fijarse. Quiero consultarte sobre el mismo procedimiento pero con imágenes de diferentes dimensiones... Por ejemplo: Qué hay para imágenes horizontales y verticales, con distintos anchos y altos?

[@MarilaLasierra22]

Estupendo como siempre!!

[@estebandifatta3689]

Funciona a la perfección, muy bien explicado, muchas gracias.

[@jorgesorel8445]

Bueno ya resolví el problema gracias por su atención.

[@eury958]

Buen vídeo, eres muy pedagógico , sabes como explicar , muchas gracias.

[@ivansalazar8256]

Me asombra tu buen trabajo. Gracias me a funcionado muchísimo

[@pietrocasale5562]

TREMENDO VIDEO HERMANO!

[@yisel1408]

Sos un capo Jean, lo entendí muy rápido y me re sirvió muchísimas gracias.

[@dany.galletitas9750]

Excelentes vídeos de mucha ayuda.

[@wilfredcastillo4031]

me gusto lo voy a practicar en el link de codepen que diste gracias .

[@linderchavezcastro5686]

excelente!!! tus vídeos son muy buenos, tienes el don de explicar claramente . gracias

[@chockypetu]

hola muy bien explicados los tutoriales. muchas gracias. podrias explicar como poner un boton de pausa por favor

[@diananavarro5830]

muchas gracias por tus vídeos siempre de mucha ayuda

[@joelias209]

Amigo la verdad explicas muy bien, sigue así, éxitos

[@AndersonVargasFR3UD0Z3R]

Excelente muy bien explicado mil gracias...

[@ooxxMARxxoo]

Hola! Me encanto el vídeo, todo muy bien explicado. Necesitaría utilizar este slider varias veces, dentro de distintas ventanas modales pero todas dentro del index. Cuando pongo el código en los demás modales, solo funciona en e primero y en los demás no. Se te ocurre que podría estar fallando? Gracias, saludos desde Argentina.

[@edgarortuno4217]

Buenas noches, estimado Jean Carlos, estupendo video y tu enseñanza propositiva excelente. Estoy aprendiendo en esta materia.. y quiero preguntarte: como podría hacer que este slider que realizaste al tocar alguna de las flechas de avance, pudiera quedarse en stop y continuara en modo automático, al volver a tocar la flecha de avance? Saludos y Shalom

[@JZavalaDesign]

Excelente, simplemente excelente !

[@rdzapata79]

Muy buen video, muy bien explicado, que buen trabajo.

[@royerfabianbolanos7685]

Que gran maestro muchas gracias enserio me has ayudado mucho en mi aprendizaje

[@madtin]

Una duda! y si quiero que el contenedor principal no sea del 90% si no de menos y que las imagenes se sigan poniendo en fila cuanto de width se le tiene que poner en vez de 400%? esto suponiendo de que sean 4 imagenes claro.

[@unitemplario]

Muy bueno, grande!!

[@hincha013]

Muy buen tuto amigo, eres un crack. Luego de implementarlo me surgió una duda, ¿sabes de una función para agregar el botón de pausa? Gracias y saludos.

[@bloodbull31]

Todo muy bien! Felicidades!!

[@soychalo]

CRACK! MUCHAS GRACIAS ME HA SERVIDO UN MONTON!

[@guillermobustos322]

Explicas muy bien! Muchas gracias por compartir!

[@miguelangelperezperez2213]

BUENAS J & G , yavi el video que muestras sobre el slider, y ya lo hice y funciona correctamente, ahora me gustaria saber como le pongo un boton de pausa con js...

[@JULIANDRESGM]

Muchisimas gracias por el tutorial. Qué gran aporte.

[@santiagoherrera6534]

Eres el amooooooooo!!

[@marlonmendez641]

gracias, bien vídeo y buena paciencia, si eso note que era más vista previa

[@josephmines8915]

Bueniiiismo, me salió... Buen tutorial mi estimado. Los tutoriales que he visto de vuestra pagina J&G, son bueniiisimos, ahora lo que necesito es unir cada parte, por ejemplo, tengo ya realizado el menú (responsive vertical), ahora quiero ingresar debajo de ello el slider, como hago ello... No soy experto en diseño web, pero ansío hacer, es para un proyecto web de la u.... Agradeceré si me apoyan esa parte...

[@juanramonseijo5468]

Espectacular video y muy bueno explicando. Sólo tengo un problema: Resulta que no debo haber enlazado bien algo porque no me funciona. He repasado el video varias veces y toda la sintaxis es correcta, por lo que intuyo que el problema debe ser en . Es posible que algo haya cambiado en el link después de tanto tiempo??. Mil gracias de antemano y muchas felicidades por el vídeo

[@pongamoslo-a-prueba]

x2 . si puedes solucionarlo seria de gran apoyo

[@scott-123]

No, ese no es el problema, yo usé ese sin ningún problema hoy mismo. Fijate que esté adentro de

[@JavierReyes-ei2sd]

Explicas muy bien muchas gracias !

[@3rilafa]

Gracias, me sirvió mucho, use la idea para implementar otra cosa. Saludos

[@mamorenoga1]

Gracias por compartir tu conocimiento.... Excelente video

[@programador101]

que maestro muchas gracias otros plugin te hacen pesado la web infinatas gracias!

[@carlosjoaquin1610]

eres un master saludos desde México me agradan tus tutoriales

[@cyberpunknexus6reloadgits299]

Excelente aporte como siempre :), saludos

[@paulajacksonbad9219]

Me funciono de entrada! gracias !!!!!!