Slider de imágenes con JavaScript

1. Introducción: De acuerdo, chicos en este proyecto, vamos a construir el deslizador del carrusel y tenemos aquí las flechas que podemos intercambiar. Entre estos diferentes deslizadores, podemos poner tantos como queramos. Entonces tenemos estas flechas aquí dentro y también tenemos estos pensamientos como indicar en cada Cuál fuera de los deslizadores. Teníamos una en este momento por lo que podemos ver aquí. Teníamos en el primero. Estamos en el segundo donde en el tercero, y podemos sumar tantos como queramos. Entonces para estos curso, solo necesitas conocer los conceptos básicos de HTML y CSS en un poco de trabajo es genial. Pero no te preocupes, porque voy a cubrir todo las cosas más importantes que necesitas saber. Y voy con un ritmo muy lento. Por lo que realmente puedes entender Este es un proyecto realmente bueno. Si quieres poner algo en tu portafolio y eso es justo, como demuestra que puedes usar javascript like de una manera realmente profesional y el Sí, espero que estés emocionado por iniciar este proyecto. Por lo que voy a ver en el siguiente video 2. Cuerpo de HTML: Muy bien, chicos, empecemos nuestro proyecto. Y lo primero que tenemos que hacer es abrir nuestro editor de código. Estoy usando el código de estudio visual, como puedes ver aquí. Pero puedes seguir junto con cualquiera de los otros editores llamados que son muchos por ahí tan sublime átomo y muchos otros. Puedes hacer una búsqueda rápida en Google. A mí me gusta usar visual studio cold. Es gratis. Y si quieres unirte a mí haciendo este proyecto usando exactamente lo que estoy haciendo aquí, solo puedes descargarlo esta gratis. Entonces una vez que lo hagas, empecemos con el archivo nuevo archivo, y los voy a guardar como índice dot html. Entonces voy a entrar aquí. ¿ Y dónde está? Yo me voy. Tengo estos estos doblados aquí, y voy a llamar a este punto índice html. Está bien. Y ahora voy a hacer es voy a escribir html Visual studio llamado Es este tipo de abreviatura terminada que si haces clic, ya hay un fragmento de código, así que no tienes que escribir todo todo el tiempo voy a poner aquí el título para tobogán celular de Blodgett Kara. El y yo habría puesto aquí una H uno y aquí adentro. Voy a poner auto Rossell, slither, y voy a empezar aquí con un Deve. El tipo de toboganes. Voy a poner el caso combinado aquí. diapositivas. No podía decir que nada de tenedor de maíz. De acuerdo, entonces tenemos un televisor aquí, y lo que necesitaba aquí ahora es que voy a poner tres deslizadores, así que necesito crear tres ladrones aquí. Ups. Deja que me deshaga de voy a llamar a estos Deve con las garras de mis diapositivas. De acuerdo, voy a tener tres de esos. 123 De acuerdo, tenemos éste, y esto es lo que necesito en este momento. No necesito nada más. Ahora. Yo sólo voy a entrar aquí en la parte superior, y voy a poner un enlace AM para el CSS. Mira, aquí hay otro fragmento, así que no tengo que escribir todo todo el tiempo, Así que tengo un vínculo con la relación de estilo. Mierdas. Aquí es donde voy a poner mi archivo CSS y lo lleno que va a ser voy a entrar aquí. Este es mi padre, donde pongo mi índice de punto html cuando creas el doblado aquí llamado CSS como piensa CSS organizado Y dentro de ahí, ahí es donde voy a guardar estos archivo. Entonces voy a hacer CSS y por dentro. Quiero llamar a este archivo principal sobre CSS. Vamos a crear estos archivo ahora guardar como y vamos dentro del punto principal CSS Quiero llamarlo principalmente dot CSS Voy a poner mi cuerpo es un color de fondo de azul solo para asegurarnos de que tenemos el correcto. Azul Abierto. Él está aquí. Uh, voy a subir. Abre estos y mira, estamos carrusel tobogán aquí. Eso es lo que tenemos en el fondo Color azul. Entonces está funcionando. Esto es lo que yo quería. Ahora, OK, tenemos muchas estas espinas troncales aquí. Este es el esqueleto de nuestro m de nuestro proyecto. Yo sólo quiero hacer aquí. Déjenme deshacerme de estos. Voy a poner la estrella. Esto es justo como apuntar a todo en nuestro y en nuestro proyecto, básicamente, y lo que me gusta hacer es solo poner una despedida de cero y el margen de cero en als los elementos además de poner un libro, dimensionar frontera libros para solo asegurarme de que si me configuro con va a contener todos los partidos y márgenes para tener el exactamente con de los elementos que quiero. De acuerdo, así que tengo este aquí. Ahora solo necesito poner un poco de estilo. Yo quería que mi h one alguna vez texto una línea de centro que se centrara en la página. Quiero tener un margen superior de 80 píxeles, y quiero tener un margen. Bottom off. Ah, 50 pixeles. De acuerdo, veamos qué está pasando aquí. Entonces me dieron mi título de calumnia Carcelle y luego fuera de curso, tengo estas vidas aquí dentro que por el momento no están mostrando nada, pero vamos porque no tienen nada. Mira, están completamente vacías. Por eso no vemos nada. Entonces lo que quiero hacer aquí ahora es básicamente Ah, voy a poner una clase en cada uno de ellos. Y así porque cada uno de ellos, tendrán que conseguir una imagen de fondo. Entonces voy a poner aquí. Por ejemplo, Deve un Deve a y profundo tres. Entonces estas son las clases que estoy rd y ahora aquí, en realidad puedo apuntar mi dar uno. Voy a poner el coma para que pueda apuntar a todos al mismo tiempo. Entonces Deve a y luego profundo tres. Está bien. Y quiero que tengan una altura de 500 beats. ALS. Yo quiero tener un tejido off al 100%. Está bien. ¿ Y ahora vas a ver por qué? Voy a poner estos al 100% y voy a poner un fondo colon de fondo de ah, digamos ratas, ¿de acuerdo? Y voy a poner mi tabla ahí frontera de uno grande. Entonces los sólidos bloquean, y voy a poner el margen inferior de 10 píxeles. Entonces esto son todos los ladrones. Van a tener estos. Mira, yo configuré estos es una semana de 100% porque todas estas salsas, están dentro de estos leves show container. Está bien. Y este contenedor de diapositivas que voy a poner aquí. Mira, presentación de diapositivas, contenedor bash. Voy a poner que quiero tener un margen cero fuera todo para estar centrado en la página, y voy a poner unas marcas con apagado 1200 píxeles, y voy a tirar sólo al texto. El renglón interior. Toby, todos los centros. Está bien, Lance, refresca, thes. Y mira, tenemos nuestro primer tobogán de carrusel aquí el segundo y el tercero. De acuerdo, entonces esto es obviamente todavía no está completamente estilizado como queremos, pero estamos entrando ahí. No, porque nosotros, um aquí dentro. Mira, los ladrones están completamente vacíos, pero les dimos altura, ¿de acuerdo? Y el con el con estos sería 100% de descuento en el padre. Y el padre está diciendo que tiene un máximo con 1200 píxeles. Entonces, como se puede ver, se trata de 1200 píxeles. De acuerdo, así que tenemos este. Ahora, vamos sólo, como objetivo individualmente a cada uno de los ladrones y darles un fondo. Está bien. Eso voy a poner aquí, por ejemplo. Mi Deve uno va a tener una imagen de fondo fuera de ti r l Y aquí voy a poner la URL . Vamos a ver aquí. Mira, estamos escribiendo esta cala aquí en el punto índice html. Tenemos que ir adentro. No, en realidad, lo siento. Estamos anotando estos en el CSS en el CSS en el punto principal CSS. Ese es el correcto. De acuerdo, estamos escribiendo aquí, y luego vamos arriba, y luego necesitamos ir a las imágenes del dedo del pie, y luego elegimos la imagen que queremos. Entonces volvamos aquí. Por lo que necesitamos subir un nivel porque estamos dentro del CSS para ellos. Tenemos que subir uno, y luego tenemos que entrar en las imágenes dobladas. Y luego veamos qué tipo de imagen me dieron la playa. De acuerdo, entonces voy a poner aquí beach dot j pay. Esta es la extensión fuera de la imagen. Cada imagen va a ser diferente. Mira, este dice en tu tipo de artículo JPEG, podrían ser GIF, o podría ser PNG. Hay un montón de tipos diferentes de extensiones para imágenes, así que conseguí esta aquí. A ver también, ¿cómo se ve, por cierto? De acuerdo, voy a refrescarme y mirar, pero la imagen no se ve tan bien por el momento. Mira, Entonces lo que voy a hacer aquí es que voy a poner ahí tamaño de fondo, así que de vuelta a tierra tamaño Toby cubierto. Entonces esto es para asegurarse de que eso va a mostrar la mayor parte de la imagen tanto como podamos. Y también quiero centrar la imagen en estas fiestas aquí que tenemos. Voy a poner aquí atrás, um, um, fondo, posición tierra atrás. Y yo quería estar en el centro en la X, como, horizontalmente y centralmente vertical. Refresquemos y miremos. Ahora esta imagen está completamente centrada, como horizontal y verticalmente, y ahora podemos hacer lo mismo para los otros dos. De acuerdo, entonces vamos a copiar estos arriba cuando los botines uno aquí y ahora el dif también. Si recuerdas, hubo uno que fue locado a Se ve aquí. Se reía al atardecer, y esto era puesta de sol. Y mira, estamos repitiendo el mismo código para un amor ellos. Entonces qué podemos hacer al este, porque todos nuestros ladrones aquí tienen la clase de mis deslizadores. En realidad podemos poner estos son Incluso podemos poner en este en este. Seleccionado aquí. Podemos cortar estos, y podríamos ponerlo aquí. Mira Y ahora podemos acortar un poco más nuestro código. Y diputados miran Así que vamos a ver. ¿ Cómo se ve en este momento? Vamos a refrescarnos. Esto está bien. Esto está bien. Aquí hay algo. Están bien. Estos son los tres. De acuerdo, vamos a refrescarnos. Y esto está bien. Entonces conseguimos todas nuestras tres derrotas que vamos a transformar en el slider como dije. Eso. Sí, básicamente, eso es todo. Eso es lo que tenemos ahora para la fundación de nuestro slider del carrusel. Y en el siguiente video, voy a empezar a agregar algo de JavaScript para que podamos tener algún tipo de interactividad aquí , así que sí, ya veré el siguiente. 3. Conexión de JavaScript: Muy bien, chicos, chicos, bienvenidos de nuevo. Y en estos realmente, vamos a empezar a agregar algo de JavaScript a nuestro proyecto. Entonces lo primero que tenemos que hacer es ir aquí a nuestro punto índice html Y primero que nada , ¿por qué crea un nuevo archivo que se va a llamar main? Vamos a crear una nueva carpeta plegada aquí nueva. Vamos a llamarlo J. S porque va a estar por encima de JavaScript. Vayamos adentro. Input main dot Js Este es el nombre de nuestra presentación aquí, y voy a hacer aquí y consola No guerra. Si no conoces a un cónsul don't Lock es solo para que podamos mejorar las cosas en JavaScript no va a afectar nuestro proyecto de ninguna manera. Pero solo te va a dar alguna información si nuestro código está funcionando bien o no. Entonces voy a poner aquí, um, archivo. Está trabajando si el archivo está funcionando. Entonces voy a poner en tu final está trabajando con las seguridades. Y ahora necesitamos dedo del pie añadido aquí en el guión y voy a poner a la fuente que va a ser Js el doblado que acabamos de crear y luego el punto principal J s. Vale, eso va del pie nuestro navegador. Actualiza la página. Y ahora deberíamos abrir las herramientas de desarrollo que no controlamos. Perdón. Correcto. Haga clic en inspeccionar en la base, o puede presionar F 12. Mira, tienes las herramientas de desarrollador aquí a la derecha. Si haces clic en consola, voy a aumentar un poco el tamaño de estos para que puedas ver mejor archivo está funcionando. Entonces nos dieron estos mensajes que estábamos buscando. De acuerdo, entonces ahora podemos volver aquí. En realidad voy a aumentar el tamaño del texto aquí para que ustedes puedan ver mejor otro si esto es demasiado, pero creo que probablemente debería estar bien. Podían ver Bueno, así que conseguimos este hecho. Voy a Lo que voy a hacer aquí, en primer lugar, es que voy a crear la función que va a ocultar o va a esconder todos estos profundos . Está bien. Todos estos deslizadores. Esto es lo primero que voy a hacer. Entonces voy a empezar con los contras causados que las diapositivas de show van a ser iguales a una función estrecha . De acuerdo, Así es como declaras aquí el estrecho funcionamiento. Esto es como de la sintaxis del último año seis. Y solo estoy agregando estas diapositivas de show constante del dedo del pie porque no va a devolver nada diferente va a hacer lo mismo todo el tiempo. Entonces ahora lo que voy a hacer aquí es básicamente seleccionar. Yo me voy. Voy a seleccionar elementos de Elise aquí. Yo estaba como, éste. Este y éste usando el punto de documentos Obtener elementos mi nombre de clase en la clase. Nombre A. Ámenlos . Tienen mis toboganes. De acuerdo, así que voy a hacer mis diapositivas. Mira, no necesito poner un punto aquí desde antes, así que voy a seleccionar estos y soy a lo que voy a llamar. A estos se le llama estos. Ah, los clones se deslizan. Está bien. De acuerdo, Así está adentro ahora. Por lo que se va a pensar en las diapositivas para conseguir todas estas. Entonces si hago una consola, ambos log de diapositivas. De acuerdo, hagámoslo. Vamos a refrescar la página. Uh, está bien. Algo que no está trabajando. Jasmine o.J. o.J. S está bien, porque esto está dentro de nuestra función. Para que se ejecute una función, necesitamos llamarla. Está bien. Tenemos que decir función. Empezar a correr. Entonces para hacer eso, solo ponemos el nombre de la función y ponemos los paréntesis, y ahora todos estos dentro deberían correr. De acuerdo, mira, ahora obtenemos la colección HTML que básicamente está agarrando todos los elementos. Como dijimos, Mira, este es el 1er 1 espera este es el 1er 1 que ves está sacando un punto culminante que este es el 3er 1 Y este es el que. Este es el 3er 1 año, así que 1er 2do 3er los conseguimos todos. Entonces Ok, esto es como una matriz ahora. Y para mí, dedo del pie accede a cada una de ellas individualmente. Tengo que hacer algo así como un cuatro. Mira, lo voy a hacer por dejar que igual a cero. Voy a empezar mi contrapeso cero. Voy a decir que mi yo va a ser un último menos de un largo. Uh, los toboganes no tienen longitud. Por lo que la longitud del punto de diapositivas es el número de elementos que tenemos. Acabamos de ver que estos tres, pero podemos hacer una bitácora del consulado solo para asegurarnos de que sea correcto. Entonces voy a hacer I Plus Plus, esto es sólo para asegurarnos de que estamos iterando uno por uno. De acuerdo, así que voy a hacer aquí sólo para que veas un maíz vendido esos troncos, y voy a poner vía estos. El número off se desliza hacia el este Ponga el espacio. Voy a poner el venir aquí, y ahora voy a poner diapositivas. Voy a copiar estos. Ligera longitud de inicio. Esto es todo desarrolladores. Ya queman todo el tiempo para asegurarnos de que estamos obteniendo los valores correctos voy a refrescar. Mira, el número de toboganes Oriente tres. De acuerdo, eso es lo que estamos haciendo aquí. Deslizaríamos longitud de scott porque éste, como dije, está agarrando todos estos elementos 123 en el oriente poniéndolos dentro de una colección HTML . Eso va a ser como una matriz. Por eso podemos bucear a través de ellos y podemos obtener la longitud. Ahora estamos haciendo este cuatro bucles aquí, dedo del pie. Es cada uno a quien vamos a comer. El precio les va a poner una exhibición de ninguno. De acuerdo, entonces yo m Vamos a ver qué podemos hacer aquí con estos. Voy a hacer aquí algo como esto. Voy a hacer mis diapositivas, ¿de acuerdo? Y mis diapositivas van a ser iguales a dos. Yo bien, diapositivas yo en la primera vez que esto se está ejecutando está empezando en cero. Entonces va a ser diapositivas cero, y luego vamos a poner la pantalla de puntos estilo punto bien, igual a ninguno. Y obviamente, primer lugar, el let I es igual a 2 a 0 en la primera corrida después de que tengamos aquí, publico. Además, esto significa que si está empezando con cero después está yendo el dedo uno aquí y después se va a y ve dos es menos de tres aquí dentro. Se va a parar. OK, va a empezar en Lee de cero a dos. Y estos son los números de la matriz. Si entiendes aquí, como una matriz, los primeros elementos van a ser, Digamos que tengo algo como estos. Como si solo estuviera poniendo algo. Como dije, ustedes deberían saber esto ya, Bob, Bob, igual que explicarlo rápidamente, Déjalo. Estos primer elemento de la matriz es la posición cero la 2ª 1 posición desgastada, y la 3ra 1 es posición a la voy a poner aquí es algo así como estas cero uno dos bien, y esto es lo que está pasando aquí dentro. La primera vez se inicia con cero. Entonces básicamente, es agarrar estas primera derrota después de que este frío se está ejecutando, este es un bucle de cuatro. Entonces sigue yendo al siguiente aquí dentro, así que va a ser uno. Entonces después va a ser uno va a esconderse hasta el 2do 1 y luego va aquí dedo del pie a, Pero entonces va a revisar, ¿de acuerdo? Él es demasiado menos de tres, porque esta es la longitud es verdad. Sí, pero si intentas correr de nuevo, él va a estar aquí. Ese tres es menos de tres. No. Por lo que se descompone. Está bien. Por lo que ojalá ustedes pudieran entender esta fiesta aquí dentro. Eso Sí, pongamos estos dedo atrás yo y yo vamos a refrescarme, Y como puedes ver, todos ellos, ya se han ido. Pero lo que quiero hacer aquí ahora es en realidad quiere hacer algo como estas diapositivas. Y luego voy a poner por ejemplo, el 1er 1 el cero, y voy a poner estilo Dr. Display of Lord. De acuerdo, si me refresco, Mira ahora, sólo el 1er 1 bloque fácilmente explicado. Podría poner por ejemplo, el 2do 1 aquí. Mira ahora, sólo el 2do 1 ¿Qué? No pude poner el tercero. De acuerdo, sólo éste lo es. Pero esto no es lo que queremos poner. Quieres poner estos dinámicamente. Y cómo vamos a hacer esto es que vamos a crear la variable aquí en la parte superior, y vamos a llamar a estas variables como la diapositiva de índice indexada va a ser o originalmente es igual a una. De acuerdo, por decir, como poner ejemplo, Volvamos aquí que esta posición es una. Esta posición es a través de esto. Empujarlo volición es tres. ¿ Verdad? De acuerdo, así que tenemos este aquí. Entonces lo que voy a hacer es cualquiera que sea la posición en la que estemos en este momento fuera visible, voy a poner que el índice de diapositivas en este momento es uno. Y voy a poner aquí eso al índice de diapositivas menos uno. Va a ser igual al bloque de exhibición. Entonces, por ejemplo, mira aquí. Inicialmente, el índice de diapositivas, él es uno. Entonces si vamos a entrar aquí, esto va a ser un minero. Uno va a ser cero. Entonces el 1er 1 el primer elemento ah en exhibir va a ser éste. Como se puede ver, una mina es una. Y veamos las imágenes. Um, ¿qué es, como, índice de este lugar? Entonces esto debería estar bien. Entonces eso vamos a refrescarnos. Está bien, vamos a refrescar este. Y como podemos ver, esto está bien. Por lo que este es el 1er 1 fuera del de los ladrones, que está exhibiendo. Pero ahora podríamos pasar por aquí. Mira, el espectáculo se desliza esto cuando lo estamos llamando, podríamos poner en realidad el valor que queramos. Entonces voy a poner aquí Cuando empecé estos, puedo poner como n like va a ser corresponsal dedo del pie el número del índice de diapositivas que quiero . Y podría entrar aquí ahora, básicamente, y empanadas aquí, dentro y aquí. Voy a poner el índice de diapositivas. Está bien. Entonces primero, la primera vez, esta es la primera vez que soy Esta es la primera vez que llamo a estos. Voy a decir que esta diapositiva, el índice va a entrar aquí, y vamos a pasar el dedo sentado aquí, y esto va a pasar por aquí. De acuerdo, vamos a refrescarnos. Todo esto está bien ahora. OK, ¿qué? ¿ Qué podemos hacer también con esto? Tenemos éste esta jugando. Ahora en realidad podemos empezar a poner nuestras flechas aquí, la izquierda y a la derecha, para que en realidad podamos adjuntar algún tipo de función para que podamos ir al siguiente deslizador. Entonces vamos a hacer esto en el siguiente video, que no guardo estos videos como por mucho tiempo, y eso es todo, chicos, si tienen alguna pregunta como dije, solo déjalos abajo y ya veré en el siguiente video. 4. Añadir filas de deslizamiento: Muy bien, chicos, chicos, bienvenidos de nuevo. Y ahora vamos a crear nuestros surgieron para que básicamente pudiéramos hacer click en ellos para ir a la siguiente diapositiva. Entonces lo que voy a hacer aquí es que voy a después de todo mi difc Voy a crear un elemento ancla con una clase del anterior, Por ejemplo Solo voy a poner aquí por ahora. Estos hashtag simplemente temporal. Um, no creo que ni siquiera los necesitemos por el momento. Creo que sólo necesitamos estas clases, y voy a poner aquí otra con las garras de la próxima. ¿ De acuerdo? Y por el momento, si me refresco, no vas a ver nada, porque esto está vacío. Pero voy a poner aquí un código para la flecha de la izquierda y el código para la flecha de la derecha. De acuerdo, si no sabes a qué voy, qué estoy haciendo aquí, básicamente puedes ir a Google. Y si pones algo como, um código html símbolos de código html, algo así como estos que va a ser como montones de lugares se ven así. Se pueden ver todos estos símbolos derechos de autor, redactores en euros. Hay tantas, muchas cosas que puedes hacer. Mira, incluso tienes este tipo de nubes, hijo, que puedes poner con algún tipo de códigos HTML. Ah, pero sí, esta es la llamada que estoy usando aquí para la flecha izquierda y derecha. Entonces vamos a ver. ¿ Cómo se ve? Mira, llegamos aquí. Quedó uno, y llegamos a todavía de uno. Ahora mismo. Vayamos a nuestros muelles principales. ES dice, empecemos a peinar estos y lo voy a hacer es quiero mi anterior en mi próximo IRO. ¿ De acuerdo? Voy a tener que tener un cursor de puntero. Entonces cada vez que me pase con la boca, se va a dar la vuelta como una mano. Mira, um, um, respira a continuación, ¿de acuerdo? Porque todavía están vacías. Este es el problema. De acuerdo, vamos a arreglar estos en un segundo, y OK, esto es como estos. Vamos a poner esto. Yo quiero tener una posición de absoluta. Y si pongo estos como una posición absoluta, cuál es ésta? Necesito que mi puntera contenedor de presentación de diapositivas tenga una posición de relativa porque vamos a mover las cosas relativas a los padres. Está bien. Cuando pongas estos, quiero que tengan un tejido de afuera para que puedan tener lo que tengamos. Y quiero tener un top off 50%. Entonces va a ser centro vertical e. Mira, la adición aquí. Como puedes ver ahora, quiero ponerlos un poco más a la parte superior, porque cuando los pones como menos van un poco demasiado abajo. Entonces voy a poner el margen de esperanza. A lo mejor menores. Um, 22 pixels, por ejemplo. Menos 22 pixels. Y quiero que tengan un Vamos a ver un refrigerador de blanco. Es refresco. Mira, aquí están robando. Ya puedes ver con un cursor. Mira, ya está funcionando. Uh, ¿qué más puedo voy a poner la separación entre ellos una separación para abajo izquierda y derecha de 16 pixeles. Vamos a refrescarnos. No se puede ver realmente bien ahora porque necesito dedo del pie todavía ponerlos cada uno al siguiente lado. Yo quiero que tengan un peso de formas fuera de toros. Toby. Un poco más audaz. Yo quiero que tengan un tamaño de teléfono de, digamos, 18 píxeles. A ver, ¿Cómo se ve? Sí, aún necesito ponerlos a los lados. Entonces lo que voy a hacer ahora es agarrar este. Mis breves años. Lo voy a poner a la izquierda. Cero. De acuerdo, Entonces el anterior ahora debería entrar aquí a la izquierda. Mira, y la derecha sigue ahí dentro. Entonces lo que voy a hacer al respecto es que voy a agarrar mi derecho. Voy a agarrar mi derecha, y voy a poner ah no bien. Perdón. Siguiente. Voy a agarrar mi siguiente, y voy a poner el paseo. Cero refresco. Mira, está aquí en el ahora mismo y bien, entonces, ¿qué puedo hacer al respecto? Yo quiero ahora que todos ellos tengan Ah, déjame ver. Ah, quiero que se tomen un té. A lo mejor quiero ponerlos como una especie de llamador de fondo. Yo quiero darles algún tipo de color de fondo. Creo que sería bueno. Um, entonces , sí, vamos a ponerlos aquí. Un fondo, Uh, o 1er 1er Sí. Esto es lo que voy a hacer primero aquí. Voy a poner mi anterior y mi siguiente quiero cuando los superemos. Está bien. Cuando los superamos con un ratón. Entonces uno más. Yo quiero tener un fondo Kohler off rgb a y esto es RGB solo va a ser como para Alfa. De acuerdo, entonces eso va a ser algo de opacidad. Si pongo 00 cero, este va a ser el código negro para el RGB a. Y entonces el último valor es la opacidad. Si pones uno va a ser completamente opaco, si vas a poner 0.8 va a ser casi opaco. Pero mira, con algo de transparencia, todavía lo puedes ver latido de fondo. Está bien, así que ya tenemos este cubierto, pero nunca terminamos con el ratón. El tránsito es demasiado rápido. Entonces lo que voy a hacer aquí es que voy a entrar todavía. Voy a poner la transición, y voy a apuntar la transición para el color de fondo para el color de fondo. Y quiero pasar en 0.6 segundos y con está en fuera. Está bien, mira. Mira cómo sutilezas. De acuerdo, tenemos este cubierto. Ahora, Um, vale, también podemos poner tal vez una parte superior de margen. Ah, no lo sé. No lo sé. Uh, vamos a ver, Tal vez lo que pueda poner. Ya tengo éste. También quiero poner la decoración del texto apagado. Ninguno. De acuerdo, porque normalmente ¿cómo están anclados los elementos? Tienen algún tipo de cosas bajo, como, línea interminable. Y no quiero eso. Esto debería estar bien por ahora. Mira, esto está bien aquí dentro, y pero quiero darles algún tipo de frontera, algún tipo de radio fronterizo. Entonces voy a poner aquí en mi anterior una frontera aburrido el radio apagado. Digamos cero píxeles en la parte superior, Tres píxeles en la derecha, Tres píxeles en la parte inferior, izquierda y encendida. El top izquierdo va a ser cero. OK, así que esto se detiene. Derecha Top Botham, Top izquierdo del dedo del pie. Ah, abajo arriba izquierdo. Es como si fuera como en el sentido de las agujas del reloj. Así que arriba derecha abajo derecha abajo izquierda arriba izquierda? Sí, como thes. Y este de aquí, voy a apagar los radiadores fronterizos. Podría poner para sus cerca de tres píxeles aquí y luego 003 píxeles. Es refresco. A ver. Sí, ahora es un poco de radio de frontera, así que no está, como, como, completamente afilado los bordes. Um Vale, así que tenemos este ahora, todo estilo aquí. Ahora, simplemente tenemos que conectar estos, um, puntos que tenemos aquí con nuestras funciones que tenemos aquí dentro. Entonces voy a hacer esto en el próximo video, así que te veré ahí. 5. Conexión de las filas de deslizador con JavaScript: Muy bien, chicos, chicos, bienvenidos de nuevo. Y ahora realmente vamos a conectar nuestras flechas que acabamos de construir antes con nuestro archivo JavaScript para que realmente podamos ir a las siguientes diapositivas. Entonces lo primero que quiero hacer es crear una función aquí llamada const. Plus Slide es, por ejemplo, plus slide es y va a ser igual a función de flecha del dedo del pie. Está bien, termina aquí. Lo voy a pasar como un parámetro aquí y por ejemplo, y lo que vamos a hacer es llamar a nuestra función que creamos aquí desde antes. Y vamos a decir aquí que el argumento aquí dentro, lo que sea que pasemos aquí, va a ser igual al leve índice. Lo que sea que tengamos en este momento, y éste va a ser igual a lo que tengamos en este momento. Vamos a entrar aquí. Tenemos deslizamiento los cuellos de uno. Entonces esto va a ser uno más cualquier número que pasemos aquí, ¿de acuerdo? Y cualquiera que sea el número que tengamos aquí, éste es uno. Entonces este es uno más uno. De acuerdo, así que en realidad voy a poner n aquí, ¿de acuerdo? Entonces si vamos ahora aquí Tenemos que adjuntar estos aquí ahora, así que voy a poner aquí en click. Entonces si hacemos clic en éste No, no éste. Yo quiero hacer eso. El plus primero. De acuerdo, así que voy a hacer en Click. Esto es parte del HTML. Esto no es nada nuevo. Entonces al click, quiero ejecutar esta función aquí más diapositivas, y, uh, cuando quiera ejecutar estas funciones, quiero pasar el número uno. De acuerdo, Así que mira click más diapositivas uno. Entonces si estuviéramos aquí, más diapositivas, esto va a ser reemplazado por uno. Por lo que mostrar diapositivas disfunción aquí va a correr con un índice de diapositivas. En realidad voy a poner en tu ligero índice. Entonces estamos todo esto en la misma página. Mi índice de diapositiva va a ser igual al índice de diapositivas. Lo que sea que tengamos en este momento en fila en la parte superior. Además, en este fin, aquí está éste. Entonces mira, leve índice va a ser uno más N va a ser uno. Entonces esto va a ser uno más uno va a ser también. Está bien, así que, y estas funciones se van a ejecutar. Entonces esto es que ya cubrimos y va a mostrar sólo las diapositivas más índice de diapositivas, que es a partir de aquí. De acuerdo, así que al mío es uno es uno. De acuerdo, entonces la posición de la matriz ahora va a ser 01 Ok, entonces esto va a ser ahora uno, que es Así que esta es la posición cero. Esta es la posición uno. Entonces ahí va a mostrar este, y obviamente, y obviamente, si por favor sigues pulsando, actualicemos y veamos. Ups. Um, hay algo aquí dentro. Necesito guardar estos. A ver. Guardemos estos token inesperado en línea 16. De acuerdo, veamos qué pasa aquí dentro. ¿ Todo bien? Está bien. Podemos ver eso. Olvidé poner aquí mi flecha para la función IRA. De acuerdo, vamos a refrescarnos. Y ahora mira, esto está bien. Vamos a dar click aquí. Mira, ahora vamos al 2do 1 Vamos a volver a dar click, va a ir al 3er 1 Y si vuelvo a hacer clic, mira se está rompiendo, ¿de acuerdo? Porque estamos saliendo del alcance. Entonces lo que podemos hacer aquí, básicamente para este tipo de situaciones es que voy a poner aquí una declaración if que lo va a decir, mi fin. Que es este de aquí que vamos a pasar todo el tiempo. Va a ser más que las diapositivas Longitud del pensamiento o o tres si quieres. Quiero que mi índice de diapositivas sea igual a uno. Entonces vuelvo, hasta voy a poner aquí un registro de punto de consola para que ustedes vean lo que está pasando. Um, me voy a deshacer de estos. Qué consejo get putting. Ambos Señor, mis diapositivas. Pieza de posición completa. De acuerdo, voy a poner la coma. Pondremos lo común, y voy a poner aquí la posición de diapositivas va a ser, um, va a ser ésta. De acuerdo, índice Slide, mineros uno tres fresco. Mira, mi posición de diapositiva en el principio cuando estamos empezando hacia abajo, es cero. Porque esta es la posición de la matriz. Si vuelvo a hacer clic en mi posición de diapositiva, él es uno. Y de nuevo, mi posición de deslizamiento, él también lo está. Entonces es el último. Está bien. Cero para el 1er 1 en la matriz. 1er 1 para el segundo y segundo para el tercero. Ahora bien, si trato de volver a hacer. Mira, se remonta al 1er 1 así que es como restablecirlo. Entonces conseguimos éste. Ahora sólo tenemos que hacer lo mismo para el botón Atrás. Entonces para el botón Atrás, solo necesito crear el on click aquí y poner a los mineros uno, y va a trabajar de la misma manera. Pero mira, puedo ir al frente. Yo puedo ir a la parte de atrás. Pero ahora, mira, si va como mineros que uno, se va a romper. Por lo que necesitamos poner otra condición aquí. Y esta condición va a ser si mi final va a ser menos de uno. Está bien. Quiero que mi índice de diapositivas sea a mi índice de diapositivas tanto longitud o tres si quieres . Entonces esto debería, um, um, evitar que nuestro sitio web se rompa. Está bien, Así que mira, déjame refrescar este. Um, está bien, vamos a ver. Aquí hay algo que yo por Dios está bien. Esto es, como, no diapositiva, índice, Pero mis diapositivas, Este fue el error. Vamos a refrescar este. Ahora vamos al frente. Vayamos a atrás y miremos todo el tiempo reiniciando para que no haya problema con éste ahora. De acuerdo, entonces supongo que eso es todo para estos video. Ahora, en realidad ahora podemos simplemente poner nuestros puntos aquí y al igual que, um, click y chequear, lo que sea, lo que sea actual. Entonces estamos en este momento, así que voy a hacer estos en el siguiente video. 6. Añadir puntos de deslizante: Muy bien, chicos, chicos, bienvenidos de nuevo. Ahora construyamos nuestros puntos aquí para que podamos dar click a través de las diapositivas del carrusel. Entonces volvamos en el año al código de estudio visual. Y en año en la parte inferior, estoy realmente creado el con la clase de pensamientos maíz diciendo bien. Y por dentro, voy a crear el lapso con una clase de puntos, y necesito tres de ellos. ¿ De acuerdo? Por el momento, si intentas refrescarte, no vas a ver nada, bien, Porque están vacías. Entonces vayamos a nuestro punto principal c. Un sentido aquí y lo que quiero hacer, primer lugar, es que voy a crear mi pensamiento. Y quiero eso siempre que espero sobre ellos. Yo he nombrado con mi Mauser con la boca. Perdón. Yo quiero que tengan una altura de 15 píxeles. A. Nos hemos quitado 15 almas grandes. Yo quiero que siempre marquen 02 píxeles. De acuerdo, esto es para que tengan algo de espacio entre ellos. Yo quiero tenerlos. Yo quiero que tengan un colon de fondo. Ah, dura BBB. Entonces esto da, como, una especie de color grisáceo. Yo quiero que tengan un radio de frontera del 50%. Esto es sólo para que parezcan, Uh, sí, bro, Todavía no los podemos ver. No los podemos ver aún porque esponjas por antes de la agregada se muestra en línea. Por lo que necesitamos darles una visualización de bloqueo en línea. En primer lugar, para que en realidad podamos poner todos estos estilos. Está refrescado. Míralos aquí. Ellos ahora quiero que también tengan un margen del margen superior del Thorpe off 20 pixels. A ver. Aquí están. Sí. Y ahora, cada vez que los pase con la boca, Así que voy a poner aquí un pensamiento. Pensado más. Yo quiero que tengan un fondo de tierra. Kohler apagado 7171 leve, por favor. Un poco de ah, ritmo de Ah, sí, gris más oscuro. Pero esto va demasiado rápido. Entonces voy a poner aquí una transición, ¿de acuerdo? Y una transición que va a afectar mi suelo de grupo trasero. Kohler, 0.6 segundos y va a ser justo es refrescar. Ahora luce mucho mejor. De acuerdo, Así que quiero ponerlos Aziz. Bueno, algún tipo de clase de activo, algún tipo de clase de activo, um, que si están activos, van a tener este tipo de antecedentes. Entonces voy a poner aquí activo. Va a tener este tipo de coladas de fondo. Bueno, entonces ya sacamos a éste del camino. Entonces básicamente, es refresco. Mira, y esto está bien. Entonces eso es todo. Están de estilo ahora. Y en el siguiente video, realidad los vamos a conectar con nuestro archivo JavaScript para que podamos hacer clic a través de ellos e ir a la siguiente diapositiva. Y al igual que lo que tenemos aquí con nuestras flechas, así lo veré en el siguiente video. 7. Conexión con JavaScript con los puntos de deslizador: Muy bien, chicos, chicos, bienvenidos de nuevo. Entonces entremos aquí dedo del pie o los visuales a tu cabra en nuestro punto principal Js Y déjame solo deshacerme de este Consejo de registro es como poner algunas cosas aquí que ya no necesitamos . Voy a crear aquí objetivo constante, permitir nuestros pensamientos, y les voy a llamar pensamientos, y esto va a ser igual a un documento. Got get elements my class name in the class e's dot Si recuerdan, miren desde aquí, todos estos tres. Y ahora esto me va a dar una colección HTML que consigues tratar como en la violación para que podamos hacer a cuatro loping aquí para mirar a través de todos ellos. Y vamos a hacer lo mismo como aquí arriba. Entonces déjenme igual a 20 Ok, yo menos entonces, um Daut. Longitud de Daut. De acuerdo, los puntos no lo hacen Longitud va a ser yo lujuria golpes. De acuerdo, entonces vamos a mirar a través de todos ellos. Y lo que vamos a hacer es si si mis pensamientos, yo el que estamos viendo en el momento pensamientos clase menos no el maíz contiene la clase de activo esto es para asegurarnos de que estos elementos que estamos viendo en el momento contengan la clase de activo. Yo quiero seleccionar estos pensamientos. Está bien. Y quiero hacer un contrato de arrendamiento de clase punto pensamiento quitar la clase de activo. Si tienen una clase de activo, vamos a quitar la clase de activo. Esto es lo que vamos a hacer. Yo soy colaborativo, este consejo, ese log. Y ahora aquí dentro, voy a hacer mis pensamientos. Algo tiene antes aquí. Índice de deslizamiento menos uno de Dios. Esto es así como, cualquiera que sea la diapositiva que estemos en este momento, voy a aplicar el nombre de la clase. Por lo que el arrendamiento de clase. Pero puedo poner como, nombres de clase para que ustedes puedan ver diferente nombre de clase va a ser igual. Entonces además, podría poner vidrio, menos vidrio, menos las probabilidades, y voy a probabilidades el vaso de activo. Está bien. Ah, vamos a refrescarnos y vamos a ver. Mira, ahora tengo una clase de puntos aquí y la clase de activos también voy al siguiente . Mira, ahora, este de aquí es la clase de activo y este No, y lo mismo aquí dentro. Ahora bien, si intentas hacer click en alguno de estos aún no se está ejecutando. Entonces lo que podemos hacer ahora para que funcione es simplemente crear otra función aquí. Vamos a llamarlo const. Corriente ligera diapositiva actual, y esto va a ser igual dedo del pie una función estrecha. De acuerdo, voy a pasar en el año, y puedes poner lo que quieras. Esto es como un blaze sosteniendo, y voy a hacer exactamente lo mismo que tenemos aquí dentro. Pero esta vez, en lugar de poner estos leve índice va a ser incremental porque no queremos incrementos. Queremos ir exactamente a donde queremos. De acuerdo, entonces tenemos que entrar aquí ahora. Y en todos estos tramos, solo hay que poner ese solo clic. Va a ser igual a la función que queremos ejecutar. Y esta función va a ser diapositiva actual para el 1er 1 Vamos a poner corrientes vida uno. Ups. Pongamos estas corridas corridas uno para el 2do 1 Vamos a poner corrientes vida también. Y para el 3er 1 vamos a poner tobogán actual tres. Es refresco y veamos a Bom bom bom y aquí facilidad trabajando por completo. Bien. Mira, ahora estamos como, básicamente al final, chicos. Ahora, lo último que solo quiero hacer es salir algún tipo de efecto cuando estamos pasando por los siguientes solo dedo del pie para que sea este tipo de campanas y silbatos, como dice la gente, para que sea un poco más hermoso, el proyecto. Entonces el proyecto es básicamente que, como dije, vamos sólo, como ir por el video final donde vamos a hacer algún tipo de bonita transición entre la diapositiva. Por lo que también en el siguiente video 8. Transiciones en Css: Muy bien, chicos. Bienvenido de nuevo. Entonces ahora vamos a sumar este tipo de transiciones entre nuestros deslizadores cuando hacemos clic. Entonces lo primero, vamos a entrar aquí a nuestro estudio visual de carbón alquitrán index dot html Y vamos a la clase de desvanecimiento. De acuerdo, esta clase, puedes poner el nombre que quieras solo le están dando este, fe, porque esto va a ser algún tipo de efecto de desvanecimiento. Como dije, puedes usar el nombre que quieras. Voy a escuchar ahora al punto principal CSS. Y voy a apuntar ahora a esta clase de fe que acabamos de crear en ellos. Ahora vamos a hacer algo aquí desde las animaciones CSS llamadas Animación, Animación. Nombre de Dash. ¿ Y cuál es el nombre de nuestra animación aquí? Esto depende completamente de ti. Puedes poner el nombre que quieras. A la animación que quiero se le va a llamar destino. De acuerdo, Estos nombres, podrían ser diferentes. De acuerdo, Ellos están completamente a ti. Entonces voy a poner el fundido, y este es el nombre de la animación y la duración de animación Animación va a ser de 1.5 segundos. De acuerdo, este es el nombre. Pero mira, hay que tener cuidado, porque este tipo de animación, a veces no son compatibles con la era de movimientos o con Firefox Order con safari. Por lo que hay que poner este tipo de Web kids. De acuerdo, entonces donde Keep name voy a ponerlo se desvanece, por ejemplo. Y ahora voy a poner donde niños y duración y 1.5 segundos. Siempre asegúrate de poner primero a tus eran niños y durar los normales sin el kit web. De acuerdo, Ahora vamos a apuntar a estos desvanecidos de animación que creamos aquí. Entonces si creas en año, por ejemplo, desvanece uno o mi fe para Izabal mi destino ahora aquí dentro tendrías que ir en remolque. Frase clave. Está bien. Y vas a poner, por ejemplo, mis desvanecimientos. Y esta es la animación que vamos a hacer yo voy a hacer desde. Por lo que aquí es donde se inicia la animación desde la opacidad de la pasividad Off 0.4. Está bien. Hasta dos. Ahora voy a poner aquí la capacidad fuera de uno. Voy a decir estos. Voy a refrescarme y vamos a ver, ya ves. Mira estos. Bonita innovación. Y básicamente, eso es todo. Chicos, esto es Esto es lo único que nos faltaba, este tipo de animación. Por lo que ahora se ve un poco mejor con este tipo de transición desvaneciéndose de una a otra. Y espero que ustedes disfruten de este proyecto. Es así como en realidad puedes probar tus habilidades con JavaScript y al igual que el progreso. Y si crees que si te confundiste un poco la primera vez que pasaste por el curso, sólo tienes que volver a pasar por él. Esto es lo que aconsejé. No lo pases solo una vez, vuelve a pasar por ella y prueba tú mismo haciendo no solo, como, copiar lo que estoy haciendo. Esta es la mejor manera en que vas a aprender. Y si tienes alguna pregunta como de costumbre, para enviarme un email o simplemente empujarlos aquí abajo en los comentarios y te volveré a llamar. Entonces eso es todo para los chicos del proyecto. Espero que lo disfrutes y te veré en el próximo