1. Clic derecho en "Download the compressed, production jQuery 3.4.1" 2. Dan en "Guardar enlace como" 3. Seleccionar carpeta y guardar Esa es la parte que no explicó, pero así se descarga el archivo .js que él usó Además, en la nueva versión cambiaron algunas cosas, el arhcivo CSS que se debe enlazar de los iconos es:
excelente. Dare un aporte: - Como ya saben el cambio de imagen esta en 4s. Bueno ese tiempo se debe resetear cada vez que des click sobre los circulos o las flechas. Ejemplo: cuando el tiempo este en 3s y des click para retroceder, la imagen retroceda y el tiempo se reinicie y asi la nueva imagen dura 4s...de lo contrario lo que haría seria retroceder y esperar 1s para cambiar nuevamente. El cambio se realizo en el main.js $(document).ready(function(){ var imgItems = $('.slider li').length; // Numero de Slides var imgPos = 1; // Agregando paginacion -- for(i = 1; i = imgItems){imgPos = 1;} else {imgPos++;} $('.slider li').hide(); // Ocultamos todos los slides $('.slider li:nth-child('+ imgPos +')').fadeIn(); // Mostramos el Slide seleccionado
// Dandole estilos a la paginacion seleccionada $('.pagination li').css({'color': '#858585'}); $('.pagination li:nth-child(' + imgPos +')').css({'color': '#CD6E2E'}); /* Reestablecemos el tiempo de cambio de imagen*/ cambioAutomatico(); } function prevSlider(){
clearInterval(crono); /* Detenemos el tiempo de cambio de imagen*/ // Posicion de la pagina anterior if( imgPos
Hola, colega. Primero que nada agradecerte por este excelente aporte. Solo una pequeña corrección constructiva, según la W3C, dentro de una 'section' debería ir de un 'h2' en adelante, ya que h1 está reservado para el título principal de un documento. Saludos y gracias, tu canal fue un gran descubrimiento.
Muchisimas gracias! Llevo mirando muchisimos tutoriales online para hacer un slider y este me encanta! Me mirare el resto de tutoriales que tienes, explicas muy bien!! :)
Gracias se agradece un montón. Seguid con estos tutoriales sin usar nada de plugins :) ayudan mucho. La mayoría de solo encuentras contenido en You Tube usando solo plugins o haciendo promociones de algo que tienes que pagar, en pocas palabras... estafas. Espero más vídeos tutoriales de Como hacer un Slide Shows con Jquery o Java Script de vídeos por que te quedan super nice!. Saludos.
Diego Hiroshi y sus Videos en realidad te salió, sin errores No nada ?? Yo llevo ya 4 vídeos siguiendo al pié de la letra pero no me salen 😔😖 sólo se quedan igual las imágenes. Deben tener mismo tamaño las imágenes, porque las mías son diferentes pero les doy el mismo valor de altura y ancho.
Hola, buen tutorial...Nunca me había enterado para que servia el Flex, justify-content, align-items, la verdad nunca lo había usado.. me hubiese ahorrado mucho trabajo con eso.. GRACIAS!!
Hola no soy capas a enlazar lo de font awsome, me aparece un pa2quete para web y otro para desktop le di a ambos y en el de web me sale la carpeta css pero no me sale la de fonts intente con otra que dice webfonts y unos numeros pero no me salen los iconos podrias por favor revisar creo que han cambiado algunas cosillas, por ejemplo el icono circle al abrirlo para ver la class me pone far fa-circle, creo que lo han modernizado y no soy capaz a hacerlo si nos haces un mini tutorial de como descargar y aplicar los iconos te agradeceria eternamente que el slideshow si me salio solo me falta agregar los iconos de circulo y flecha.
fue hace mucho este vídeo pero, es que me preguntaba si me pueden ayudar con esto: necesito que en vez de mostrar una sola imagen muestre las primeras 6, porque necesito hacer un slider que muestre seis imágenes y vayan corriendo aumentando dos.
Me está gustando mucho como va quedando el Slider, muchas gracias por el tutorial, me ha servido muchísimo. Explicas muy bien, paso a paso y muy claro. Me suscribo, saludos desde Venezuela :)
que te pasa mi estimado , conoces que es el respeto ? como te educaron tus padres al insultar das a entrever que tipo de personas eres , espero que algún día cambies tus modales
hola amigo te comento que cuando inicio mi slider se muestra muy rapidito las imagenes e inmediatamente se muestra el slider,,, este parpadeo molesta un poquito a la vista... que se puede hacer... gracias
hola amigo ninguno de los 3 vídeos me sirvió , a la hora di ir al código del main $(document).ready nunca me sale el "funciono" cuando le quito eso si me sale el mensaje , pero cuando la otra linea no pasa nada , esta $('.slider li').hide();
Hola muchas gracias por el vídeo esta muy bueno. Solo una duda, no logro darle tamaño al slider y ya cambie las imagenes al tamaño que necesito pero no logro modificarlo al contrario las imagenes se estiran. espero puedas ayudarme.
Hola, primero que nada muchas gracias por compartir tus conocimientos, solo una pregunta, como le haria para que la transición en lugar de ser fade-In fuera tipo slider de derecha a izquierda, intente modificar pero no puedo, podrías auxiliarme? y otra vez muchas gracias.
felicidades muy buen tutorial me sirvió bastante,pero me gustaria que me ayudaras en algo.Ese slider lo quiero poner después de mi barra de navegacion y quedo encima de la barra,como hago para resolver esto?He modificado el margin pero no puedo.Mi barra de navaegacion tiene estilo también....te lo agradecería mucho.
Tengo una duda ,¿ porque no me manda la alerta de "funciono", tampoco me esconde las imágenes de los y al escribir el código en el main.js para detectar el primer no lo hace . espero y me puedas responder.
Hola Zatu disculpa la demora , no note su mensaje, pero bueno amigo, si no le sale el funciono es porque no ah enlazado correctamente el archivo jquery o porque tiene un error en la sintaxis. Saludos ;)
THIS IS NOT A SLIDER images YET !!!!! its just a HIDE and SHOW images....the action of sliding is an animation that slide from rigt to left or opsite direction with a smooth transition.
Hola CodyTron,primero agradecerte muy buenos videos y gracias por enseñarnos. me gustaria saber si me puedes ayudar en lo siguiente. Como hago para incorporar los iconos Hubieron iconos que no me sirvieron del awesome,pero quisiera saber si me puedes enseñar ya que el video es de 2017,osea los iconos de circle si me sirvieron ,pero quice utilizar otros y no pude hacerlo,entonces lo que hice fue descargar el awesome actual 2020 ,pero ya no aparece la carpeta fonts,Hubieron dos tipos de descarga,para la web y para escritorio y no pude utliizarlos.enseeeeeñameee Plissss.
CODY BUENA TARDE AMIGO, CONOCES ALGÚN TRUCO PARA OCULTAR LAS FLECHAS , Y CUANDO PASES EL PUNTERO DEL MOUSE SOBRE ELLO QUE APAREZCAN LAS FLECHAS. AYUDA POR FAVOR, GRACIAS...
Hola , que pasa si yo ya tengo trabajado el header de mi pagina, simplemente lo trabajo debajo del header pero debo crear otra vez las carpetas fonts, css, etc y todas esas cosas para el slider en especifico? o no tengo que crear nada y lo trabajo de frente abajo del header(en este caso por ejemplo usaria la hoja de estilos universal?)?
Yo te recomendaría que hagas lo siguiente. Crea una carpeta "css" y ahi cree 2 archivos: 1 - estilos.css ( aqui iran los estilos que usted cree necesario para su web ) 2 - slider.css ( aqui ponga todo el codigo que trabajamos en el tutorial, o tambien puede colocarlo en los estilos.css ). todo depende de como le paresca mas organizado. Saludos ;)
no se si conoces el plugin animate.css, lo que quiero saber, es que si puedo hacer que cuando cambie las imágenes, se puede agregar efecto a los textos, siempre cuando se cambien de imagen. por ejemplo: cuando cambia de imagen, el texto haga un fadeIn. se puede mi amigo? y como? Gracias, saludos de Perú
Si si lo conozco, pero sinceramente nunca lo he utilizado jejeje, y bueno si se puede hacer lo que tu dices , ya mas adelante haré otro tutorial para un Slider mas avanzado y con las caracteristicas que dices, saludos ;)
No tiene por qué si sólo has llamado a ciertos códigos que especificaste Aun que tengas mas archivos en la carpeta, sólo estas llamando a los códigos que quieres
Hola Jose Luis, Pues te comento que actualmente me encuentro desarrollando un curso de Juqery, que va a estar genial. El tiempo que me demorare aun no lo se, pero estate atento. Saludos ;)
Bueno tengo tutoriales sobre sublime text, no digo que es el mejor, pues cada uno tiene sus gustos jeje. Hey pero jquery no es un editor de codigo . Saludos amigo :)
Hola hermano, gracias por el video, muy bueno. Pero yo estoy teniendo un pequeño error, y es que la paginación se me duplica. Tengo 7 imágenes y el slideshow me presenta 14 puntos en la paginación y cuando el slideshow avanza me presenta la primera muy bien, luego la segunda en blanco y el tercer slide me presenta la segunda imagen. qué crees que pueda estar sucediendo. Gracias!
Oye , tengo problemas con el js , esta todo bien enlazado ya lo revise varias veces pero simplemente el main/js no me funciona , intente buscar una solucion para ver si era el navegador pero tampoco , no se que haya fallado , no se si afecte que no sea las misma version del jquery porque en el video dice 3.1.0 y la que viene en la pagina en este momento es la 3.2.1 , podrias ayudarme , en verdad necesito aprender a como hacer esto :(
Lorem Ipsum "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem Ipsum "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem Ipsum "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem Ipsum "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
> = imgTotal){pos=1;} else{pos++;} seleccion(pos); } //funcion para ir a la imagen anterior function prev() { //control para no superar el numero de imagenes if (pos
Lorem Ipsum "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem Ipsum "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem Ipsum "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem Ipsum "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
> = imgTotal){pos=1;} else{pos++;} seleccion(pos); } //funcion para ir a la imagen anterior function prev() { //control para no superar el numero de imagenes if (pos
estas copiandolo bien? fijate en los comentarios que puse en el texto porque he dejado algunos y tal vez uno de ellos no lo cerre y te esta dando ese problema. ahora lo acabo de ver y esta funcionando bien el codigo
Es tarde, pero quizás le sirva a alguien más. Ese código no es para ordenar la lista, es para que solo se muestre la primera imagen. Puede que el código no te haya funcionado por diferentes factores: 1. Puede que la clase ".slider" no corresponda al "" (recuerda que primero se crea un "" con la clase ".slideshow" y luego un "" con la clase ".slider"), si no es así, no serviría la función creada. 2. También es posible que no hayas enlazado bien la librería "JQuery" o, de por sí, que no lo hayas echo. Recuerda que ese código no es solo JavaScript, también usamos la librería JQuery. Mira bien si instalaste el JQuery (puedes buscar un tutorial) y si la dirección en el head si está bien (debe ser la dirección de la versión de JQuery que instalaste, puesto que JQuery no se enruta con la dirección del código en el Disco Duro sino con la dirección html de su página web). 3. O bien, puede ser que no enrutaste bien la dirección JavaScript en el head del HTML. De todas maneras, en este punto, ya deberías saber como enrutar diferentes elementos en HTML.
pienso que las funciones de ocultar y mostrar están tomando la característica de la lista desordenada de la etiqueta ul ,utiliza ol ,depronto te sirva.
THIS IS NOT A SLIDER images YET !!!!! its just a HIDE and SHOW images....the action of sliding is an animation that slide from rigt to left or opsite direction with a smooth transition.
1. Clic derecho en "Download the compressed, production jQuery 3.4.1"
2. Dan en "Guardar enlace como"
3. Seleccionar carpeta y guardar
Esa es la parte que no explicó, pero así se descarga el archivo .js que él usó
Además, en la nueva versión cambiaron algunas cosas, el arhcivo CSS que se debe enlazar de los iconos es:
Gracias Bro!
excelente. Dare un aporte:
- Como ya saben el cambio de imagen esta en 4s. Bueno ese tiempo se debe resetear cada vez que des click sobre los circulos o las flechas.
Ejemplo: cuando el tiempo este en 3s y des click para retroceder, la imagen retroceda y el tiempo se reinicie y asi la nueva imagen dura 4s...de lo contrario lo que haría seria retroceder y esperar 1s para cambiar nuevamente.
El cambio se realizo en el main.js
$(document).ready(function(){
var imgItems = $('.slider li').length; // Numero de Slides
var imgPos = 1;
// Agregando paginacion --
for(i = 1; i = imgItems){imgPos = 1;}
else {imgPos++;}
$('.slider li').hide(); // Ocultamos todos los slides
$('.slider li:nth-child('+ imgPos +')').fadeIn(); // Mostramos el Slide seleccionado
// Dandole estilos a la paginacion seleccionada
$('.pagination li').css({'color': '#858585'});
$('.pagination li:nth-child(' + imgPos +')').css({'color': '#CD6E2E'});
/* Reestablecemos el tiempo de cambio de imagen*/
cambioAutomatico();
}
function prevSlider(){
clearInterval(crono); /* Detenemos el tiempo de cambio de imagen*/
// Posicion de la pagina anterior
if( imgPos
Hola, colega. Primero que nada agradecerte por este excelente aporte. Solo una pequeña corrección constructiva, según la W3C, dentro de una 'section' debería ir de un 'h2' en adelante, ya que h1 está reservado para el título principal de un documento. Saludos y gracias, tu canal fue un gran descubrimiento.
Adrián Benavente gracias por tu observación. Que bueno que te haya gustado el canal. Saludos amigo ;)
Sí, sí, me identifico mucho con tu criterio a la hora de codear.
Buenas tardes CodyTron, logre adaptar el código a mi página, muchas gracias. Que tengas un excelente día.
Muchisimas gracias! Llevo mirando muchisimos tutoriales online para hacer un slider y este me encanta! Me mirare el resto de tutoriales que tienes, explicas muy bien!! :)
Genial !! Me alegra que le haya gustado mi contenido, este atenta pues habrán mas buenos tutoriales. Saludos ;)
Gracias se agradece un montón. Seguid con estos tutoriales sin usar nada de plugins :) ayudan mucho. La mayoría de solo encuentras contenido en You Tube usando solo plugins o haciendo promociones de algo que tienes que pagar, en pocas palabras... estafas. Espero más vídeos tutoriales de Como hacer un Slide Shows con Jquery o Java Script de vídeos por que te quedan super nice!. Saludos.
Diego Hiroshi y sus Videos en realidad te salió, sin errores No nada ??
Yo llevo ya 4 vídeos siguiendo al pié de la letra pero no me salen 😔😖 sólo se quedan igual las imágenes. Deben tener mismo tamaño las imágenes, porque las mías son diferentes pero les doy el mismo valor de altura y ancho.
Hola, buen tutorial...Nunca me había enterado para que servia el Flex, justify-content, align-items, la verdad nunca lo había usado.. me hubiese ahorrado mucho trabajo con eso.. GRACIAS!!
Sí, en verdad son geniales, y todas esas son propiedades de Flexbox, del cual estoy pensando hacer pronto un curso. Saludos ;)
TE QUIEROOOOO ME SALVASTE DE UN CARGO😘😘
Hola no soy capas a enlazar lo de font awsome, me aparece un pa2quete para web y otro para desktop le di a ambos y en el de web me sale la carpeta css pero no me sale la de fonts intente con otra que dice webfonts y unos numeros pero no me salen los iconos podrias por favor revisar creo que han cambiado algunas cosillas, por ejemplo el icono circle al abrirlo para ver la class me pone far fa-circle, creo que lo han modernizado y no soy capaz a hacerlo si nos haces un mini tutorial de como descargar y aplicar los iconos te agradeceria eternamente que el slideshow si me salio solo me falta agregar los iconos de circulo y flecha.
fue hace mucho este vídeo pero, es que me preguntaba si me pueden ayudar con esto: necesito que en vez de mostrar una sola imagen muestre las primeras 6, porque necesito hacer un slider que muestre seis imágenes y vayan corriendo aumentando dos.
GRACIAS AMIGO, QUE DIOS TE BENDIGAAA
Como haria si no me aparecen los puntitos de font awesome
Hola, como se hace para colocarle unos botones de pausa y play??
Pura vida, gracias, muy buen video.
Me está gustando mucho como va quedando el Slider, muchas gracias por el tutorial, me ha servido muchísimo.
Explicas muy bien, paso a paso y muy claro.
Me suscribo, saludos desde Venezuela :)
Gracias Lariannys Muñoz, me alegra tener mas suscriptores, Saludos desde Peru ;)
yo tambien soy de peru que distrito vives CoyTron ?
apoco eres de ese pais de mediocres
que te pasa mi estimado , conoces que es el respeto ? como te educaron tus padres al insultar das a entrever que tipo de personas eres , espero que algún día cambies tus modales
si pones muchos h1 te van a penalizar xD
Por qué ya no haces más vídeos?
Very interesting tutorial. 👌 Excellent.
cual de todas debo descargar jquery por fanor me pudes ayudar
Buenos días como puedo hace el boton pause con un botton igual que el sext y ant.
hola cody cual de ellos lo descargo de jquery el compremido o el descompremido
el font- aweson no puedo encontrarlo
excelente como siempre sigue con más tutoriales
Gracias mi amigo, Pipe Nada , recuerdo que eres de mis primeros subs, eso es genial. Saludos desde Perú 🇵🇪 ;)
hola amigo te comento que cuando inicio mi slider se muestra muy rapidito las imagenes e inmediatamente se muestra el slider,,, este parpadeo molesta un poquito a la vista... que se puede hacer... gracias
hola amigo ninguno de los 3 vídeos me sirvió , a la hora di ir al código del main $(document).ready nunca me sale el "funciono"
cuando le quito eso si me sale el mensaje , pero cuando la otra linea no pasa nada , esta $('.slider li').hide();
Hi sir which version of sublime text you used?
Hola muchas gracias por el vídeo esta muy bueno. Solo una duda, no logro darle tamaño al slider y ya cambie las imagenes al tamaño que necesito pero no logro modificarlo al contrario las imagenes se estiran. espero puedas ayudarme.
Amigo has un curso de php y mysql plox men eres el mejor
Muy bien video, como puedo poner pausa al slider??? de ante mano gracias.
Uf te quedo chido crack
haces muy rapido lo de la descarga del jquery cual de todas las opciones tenemos que descargar??
ponlo en 0.25 :v
como hacer que lo escrito no aparezca en el centro si no al pie de la imagen..
Hola, primero que nada muchas gracias por compartir tus conocimientos, solo una pregunta, como le haria para que la transición en lugar de ser fade-In fuera tipo slider de derecha a izquierda, intente modificar pero no puedo, podrías auxiliarme? y otra vez muchas gracias.
estuve revisando los archivos y por alguna razon en ningun navegador de mi pc me muestra los iconos de font aweson
Excelente tutorial.
Nuevo suscriptor!
felicidades muy buen tutorial me sirvió bastante,pero me gustaria que me ayudaras en algo.Ese slider lo quiero poner después de mi barra de navegacion y quedo encima de la barra,como hago para resolver esto?He modificado el margin pero no puedo.Mi barra de navaegacion tiene estilo también....te lo agradecería mucho.
Excelente canal , te has ganado un sub y un like
TENGO UNA BD MYSQL Y VARIAS CARPETAS DE IMÁGENES, TIENES UN VIDEO P ESTO?
Tengo una duda ,¿ porque no me manda la alerta de "funciono", tampoco me esconde las imágenes de los y al escribir el código en el main.js para detectar el primer no lo hace . espero y me puedas responder.
Hola Zatu disculpa la demora , no note su mensaje, pero bueno amigo, si no le sale el funciono es porque no ah enlazado correctamente el archivo jquery o porque tiene un error en la sintaxis. Saludos ;)
A mi me pasa lo mismo, el codigo esta bien escrito y todo bien enlazado
Muy bueno bro, muchas gracias.
De nada Bro. Saludos ;)
con que programa lo haces amigo
Quisiera saber como se modifica la opacidad del cambio de imágenes, para que el cambio no se vea tan brusco. Si alguien me puede ayudar por favor
font awesome ya no permite descargas
THIS IS NOT A SLIDER images YET !!!!! its just a HIDE and SHOW
images....the action of sliding is an animation that slide from rigt to
left or opsite direction with a smooth transition.
Hola CodyTron,primero agradecerte muy buenos videos y gracias por enseñarnos.
me gustaria saber si me puedes ayudar en lo siguiente.
Como hago para incorporar los iconos
Hubieron iconos que no me sirvieron del awesome,pero quisiera saber si me puedes enseñar ya que el video es de 2017,osea los iconos de circle si me sirvieron ,pero quice utilizar otros y no pude hacerlo,entonces lo que hice fue descargar el awesome actual 2020 ,pero ya no aparece la carpeta fonts,Hubieron dos tipos de descarga,para la web y para escritorio y no pude utliizarlos.enseeeeeñameee Plissss.
me salen todos las imagenes pegadas aun asi cuando escribo en el main $('.slider li:first').show() que puedo haceR?
Me pasa lo mismo
CODY BUENA TARDE AMIGO, CONOCES ALGÚN TRUCO PARA OCULTAR LAS FLECHAS , Y CUANDO PASES EL PUNTERO DEL MOUSE SOBRE ELLO QUE APAREZCAN LAS FLECHAS. AYUDA POR FAVOR, GRACIAS...
Si claro amigo aqui te pongo el codigo pues hay que hacer unos cuantos cambios en el html y css
HTML:
CSS:
.left, .left2, .right{
position: absolute;
top: 0;
height: 100%;
display: flex;
align-items: center;
color: #fff;
font-size: 35px;
cursor: pointer;
z-index: 2;
visibility: hidden;
opacity: 0;
transition: all .3s ;
}
.left, .left2{
left: 10px;
}
.right{
right: 10px;
}
.slider:hover ~ .left,
.slider:hover ~ .right,
.left:hover,
.left:hover ~ .right,
.right:hover,
.right:hover ~ .left2{
visibility: visible;
opacity: 1;
}
GRACIAS AMIGO POR LA ATENCION, DE HECHO TE E ESCRITO EN FACEBOOK, Y DEJE UNA URL Y PUEDAS PASAR POR ELLO. SALUDOS EXITOS..
como se pued hacer esto pero que las imagenes y la informacion este un base de datos?
Eso seria web administrable
SE PUEDE HACER CARRUSEL DE VIDEOS
Hola , que pasa si yo ya tengo trabajado el header de mi pagina, simplemente lo trabajo debajo del header pero debo crear otra vez las carpetas fonts, css, etc y todas esas cosas para el slider en especifico? o no tengo que crear nada y lo trabajo de frente abajo del header(en este caso por ejemplo usaria la hoja de estilos universal?)?
Yo te recomendaría que hagas lo siguiente. Crea una carpeta "css" y ahi cree 2 archivos: 1 - estilos.css ( aqui iran los estilos que usted cree necesario para su web ) 2 - slider.css ( aqui ponga todo el codigo que trabajamos en el tutorial, o tambien puede colocarlo en los estilos.css ). todo depende de como le paresca mas organizado. Saludos ;)
CodyTron Gracias men, supongo que con el javascript es lo mismo.Voy a la mitad de la parte 2 y me esta sirviendo mucho.Gracias.
Si amigo con el JavaScript es igual. Me alegra que le este sirviendo el tutorial. Saludos ;)
+C
Robben WilliAns
no se si conoces el plugin animate.css, lo que quiero saber, es que si puedo hacer que cuando cambie las imágenes, se puede agregar efecto a los textos, siempre cuando se cambien de imagen. por ejemplo: cuando cambia de imagen, el texto haga un fadeIn. se puede mi amigo? y como? Gracias, saludos de Perú
Se puede :) , lee la documentacion de ese plugin
Si si lo conozco, pero sinceramente nunca lo he utilizado jejeje, y bueno si se puede hacer lo que tu dices , ya mas adelante haré otro tutorial para un Slider mas avanzado y con las caracteristicas que dices, saludos ;)
Gracias Anthony por tu apoyo. Saludos ;)
los comandos de js me rebotan pues tengo otro main en esa carpeta como puedo solucionar ese problema porfavor CodyTron ayudame
No tiene por qué si sólo has llamado a ciertos códigos que especificaste
Aun que tengas mas archivos en la carpeta, sólo estas llamando a los códigos que quieres
great
que padre quien te enseño yo quisiera aprender asi como tu...
Aprendi por mi cuenta, mirando muchos videos de youtube. Saludos ;)
amigo puedes hacer vídeos de jquery si porfas te lo agradeceria muchisimo
Hola Jose Luis, Pues te comento que actualmente me encuentro desarrollando un curso de Juqery, que va a estar genial. El tiempo que me demorare aun no lo se, pero estate atento. Saludos ;)
que buena noticia muy bien, estaré atento (Y)
Deberias enseñar a usar Brackets o cual de los programas es mas funcional Sublime Text, Atomx, Jquery?
Bueno tengo tutoriales sobre sublime text, no digo que es el mejor, pues cada uno tiene sus gustos jeje. Hey pero jquery no es un editor de codigo . Saludos amigo :)
Saludos la ignorancia del Jquery, uso Brackets, tienes los liks de tus videos de Sublime Text desde cero?
Hola! Solo quiero que aparezca el Slider en mi página principal. Cómo hago para ubicarlo solo en ese lugar? Te agradecería infinitamente.
pues en la pestaña de tu pagina principal pegas ese código del slider -.-
Esta bueno el video pero si es verdad, no se entiende cual descargar de las versiones de jquery... Aclara esa parte al menos.
Hola hermano, gracias por el video, muy bueno. Pero yo estoy teniendo un pequeño error, y es que la paginación se me duplica. Tengo 7 imágenes y el slideshow me presenta 14 puntos en la paginación y cuando el slideshow avanza me presenta la primera muy bien, luego la segunda en blanco y el tercer slide me presenta la segunda imagen. qué crees que pueda estar sucediendo.
Gracias!
envia tu codigo y te ayudo :D
gracias hermano, lo solucioné, había una etiqueta mal cerrada
Oye , tengo problemas con el js , esta todo bien enlazado ya lo revise varias veces pero simplemente el main/js no me funciona , intente buscar una solucion para ver si era el navegador pero tampoco , no se que haya fallado , no se si afecte que no sea las misma version del jquery porque en el video dice 3.1.0 y la que viene en la pagina en este momento es la 3.2.1 , podrias ayudarme , en verdad necesito aprender a como hacer esto :(
tengo exactamente el mismo problema y necesito ayuda, descargue la version 3.2.1 del jquery y la conexion no sirve ... has encontrado alguna solucion?
yo baje la de los archivos del instructor, y tampoco me funciona, las imagenes y el texto se siguen mostrando en columna
Les comparto mi codigo, acorta las funciones:
Banner con CSS y Jquery
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#slider {
width: 100%;
max-width: 900px;
border: 6px solid gray;
margin: auto;
/*overflow: hidden;*/
position: relative;
z-index: 50;
}
#imgs {
width: 100%;
list-style: none;
display: flex;
}
#imgs li {
width: 100%;
/*ocultar las imagenes para mostrar solo la primera*/
display: none;
}
#imgs img {
width: 100%;
height: 100%;
}
.descrip {
width: 100%;
font-family: sans-serif;
position: absolute;
top: 60%;
z-index: 100;
color: white;
}
.descrip h2 {
text-align: center;
font-size: 2em;
}
.descrip p {
width: 80%;
margin: 5px auto 0;
}
#next, #prev {
width: 45px;
height: 45px;
position: absolute;
z-index: 200;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0,0,0,0.6);
color: white;
text-align: center;
line-height: 45px;
font-family: sans-serif;
font-size: 2em;
border-radius: 30%;
cursor: pointer;
transition: background-color 500ms ease, color 500ms ease;
}
#next:hover, #prev:hover {
background-color: rgba(255,255,255,1);
color: black;
}
#next {
right: 10px;
}
#prev {
left: 10px;
}
#posicion {
list-style: none;
position: absolute;
z-index: 300;
top: 105%;
display: flex;
left: 50%;
transform: translateX(-50%);
}
#posicion div {
width: 15px;
height: 15px;
background-color: black;
border-radius: 100%;
margin: 0 3px;
cursor: pointer;
}
/** {
outline: thin solid black;
}*/
Lorem Ipsum
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem Ipsum
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem Ipsum
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem Ipsum
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
>
= imgTotal){pos=1;}
else{pos++;}
seleccion(pos);
}
//funcion para ir a la imagen anterior
function prev() {
//control para no superar el numero de imagenes
if (pos
Gracias por su aporte
una pregunta Andy por que no se ve la flecha a la izquierda?
Hola, vuelvo a subir el codigo es este:
Banner con CSS y Jquery
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#slider {
width: 90%;
max-width: 900px;
height: 600px;
max-height: 400px;
margin: 0 auto;
border: 6px solid gray;
margin: auto;
overflow: hidden;
position: relative;
z-index: 50;
}
#imgs {
width: 100%;
list-style: none;
display: flex;
}
#imgs li {
width: 100%;
/*ocultar las imagenes para mostrar solo la primera*/
display: none;
}
#imgs img {
width: 100%;
height: 600px;
max-height: 400px;
}
.descrip {
width: 100%;
font-family: sans-serif;
position: absolute;
top: 60%;
z-index: 100;
color: white;
}
.descrip h2 {
text-align: center;
font-size: 2em;
}
.descrip p {
width: 80%;
margin: 5px auto 0;
}
#next, #prev {
width: 45px;
height: 45px;
position: absolute;
z-index: 200;
top: 50%;
transform: translateY(-50%);
background-color: rgba(255,255,255,1);
color: black;
text-align: center;
line-height: 45px;
font-family: sans-serif;
font-size: 2em;
border-radius: 30%;
cursor: pointer;
opacity: 0;
transition: opacity 500ms ease;
}
#next:hover, #prev:hover {
opacity: 1;
}
#next {
right: 10px;
}
#prev {
left: 10px;
}
#posicion {
width: 84px;
list-style: none;
position: relative;
z-index: 300;
display: flex;
margin: 5px auto;
}
#posicion div {
width: 15px;
height: 15px;
background-color: black;
border-radius: 100%;
margin: 0 3px;
cursor: pointer;
}
/** {
outline: thin solid black;
}*/
Lorem Ipsum
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem Ipsum
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem Ipsum
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem Ipsum
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
>
= imgTotal){pos=1;}
else{pos++;}
seleccion(pos);
}
//funcion para ir a la imagen anterior
function prev() {
//control para no superar el numero de imagenes
if (pos
ahora se ven las 4 en una sola
estas copiandolo bien? fijate en los comentarios que puse en el texto porque he dejado algunos y tal vez uno de ellos no lo cerre y te esta dando ese problema. ahora lo acabo de ver y esta funcionando bien el codigo
No me funciona el $(document).ready(function(){
$('.slider li').hide();
$('.slider li:first').show();
});
Siguen en forma de lista desordenada
Es tarde, pero quizás le sirva a alguien más.
Ese código no es para ordenar la lista, es para que solo se muestre la primera imagen. Puede que el código no te haya funcionado por diferentes factores:
1. Puede que la clase ".slider" no corresponda al "" (recuerda que primero se crea un "" con la clase ".slideshow" y luego un "" con la clase ".slider"), si no es así, no serviría la función creada.
2. También es posible que no hayas enlazado bien la librería "JQuery" o, de por sí, que no lo hayas echo. Recuerda que ese código no es solo JavaScript, también usamos la librería JQuery. Mira bien si instalaste el JQuery (puedes buscar un tutorial) y si la dirección en el head si está bien (debe ser la dirección de la versión de JQuery que instalaste, puesto que JQuery no se enruta con la dirección del código en el Disco Duro sino con la dirección html de su página web).
3. O bien, puede ser que no enrutaste bien la dirección JavaScript en el head del HTML. De todas maneras, en este punto, ya deberías saber como enrutar diferentes elementos en HTML.
pienso que las funciones de ocultar y mostrar están tomando la característica de la lista desordenada de la etiqueta ul ,utiliza ol ,depronto te sirva.
q buena intro amigo ;) Saludos ;)
seee me encanta XD, gracias saludos ;)
;)
amigo buenas tan bien me encanto tu intro jaja puedes decirme con que desarrollaste el tutorial? gracias
Gracias amigo, bueno yo utilizo camtasia studio para grabar y editar, y after effects para las intros. Saludos ;)
19:58
EN JS
DEMASIADO LARGO PARA ALGO TAN BÁSICO
y que sea lo mismo
@@juanandrescreations OPINO LO MISMO QUE ESTE MEN
please language english :)).. i am not understand it, but tutorial is nice
THIS IS NOT A SLIDER images YET !!!!! its just a HIDE and SHOW
images....the action of sliding is an animation that slide from rigt to
left or opsite direction with a smooth transition.