[MUSIC]
Muchos de los componentes basados en JavaScript de Bootstrap nos proporcionan un mecanismo
para controlar algunas de las características de estos componentes escribiendo código JavaScript,
en particular, escribiendo código Usando la sintaxis jQuery.
Así que vamos a explorar este ejercicio de índice utilizando algunos
controles basados en JavaScript para nuestro Carrusel que
incluimos en la página index.html en el ejercicio anterior.
En el ejercicio anterior, introdujimos este carrusel en nuestra página index.html.
Lo que me gustaría hacer en este ejercicio es introducir un par de
botones de control en este carrusel, y
luego usar JavaScript para poder activar estos botones.
Los botones se utilizarían para pausar y
reproducir la acción deslizante de este carrusel.
Así, incluyendo el botón en nuestro Carrusel aquí,
podemos hacer clic en un botón para detener la acción deslizante del Carrusel, y
luego podemos hacer clic en otro botón para reanudar la acción deslizante del Carrusel.
Por lo tanto, eso es lo que podemos explorar en este ejercicio.
Para comenzar en este ejercicio, iremos a la página index.html.
Y justo después de los controles izquierdo y derecho de nuestro Carrusel,
presentaré un div con el grupo de botones de clase.
Entonces esto incluirá un grupo de botones de dos botones aquí, y luego con una ID de,
CarouselButton y
cerrará el div allí.
Ahora, dentro de esto, voy a añadir dos botones.
Así que permítanme agregar un botón con la clase btn, btn-danger,
btn-small, y
una identificación de carousel-pausa.
Así que esto va a actuar como el botón de pausa, ralentiza el botón allí.
Y para este botón, Voy a introducir
una fuente como un icono con la clase fa,
pausa, y cerrar el lapso.
Así que esto introducirá un botón de pausa en el grupo de botones Carrusel.
Voy a copiar esto y pegarlo de nuevo para crear otro botón.
Ese segundo botón, llamaré btn btn-danger btn-sm, y
entonces esto sería carrusel play.
Y la clase span,
el botón sería si jugara aquí.
Digamos que los cambios e ir y echar un vistazo rápido en la página web.
Echando un vistazo a los botones tal como existen en nuestro navegador, puedes ver que
estos dos botones están ahora colocados en la esquina izquierda de mi carrusel.
Me gustaría cambiar la posición de estos botones en el borde derecho, para
que no cause este espacio azul y vacío debajo de la imagen aquí.
Así que permítanme usar un par de propiedades CSS para reposicionar estos botones en
la columna derecha del carrusel.
Ir a ese archivo CSS de inicio de estilo,
permítanme introducir un código CSS aquí.
Entonces, para el elemento con el ID CarouselButtons,
lo estoy posicionando en el borde derecho y en la parte inferior, 0 píxel aquí.
Así que estos dos y luego la posición es absoluta.
Así que esto colocará estos botones en la esquina derecha de mi carrusel.
Obviamente, simplemente introducir los botones en el carrusel no servirá para
ningún propósito.
Ahora, vamos a aprovechar los controles de JavaScript que
proporciona el Carrusel escribiendo un poco de código jQuery en
la parte inferior de la página index.html para hacer que estos botones hagan su trabajo.
Queremos poder hacer una pausa y reanudar la acción de deslizamiento de mi Carrusel.
Ir a la parte inferior de la página index.html, permítanme presentar un script aquí.
Por lo tanto, este script debe contener algún
código JavaScript escrito en la sintaxis jQuery.
Así que voy a decir,
$ (document) .ready (function), Y
esta función debería contener un par de
funciones aquí para activar los botones.
Así que yo diría, micarrusel.
Este es el ID del carrusel que se nos presenta,
por lo que diríamos, carrusel,
Intervalo: 2000.
Así que lo que esto hace es establecer el intervalo de deslizamiento del carrusel en
2000 milisegundos o 2 segundos.
Así que estoy haciendo un poco más rápido para que
la acción de deslizamiento tenga lugar en el Carrusel.
Continúe con el código jQuery aquí.
Ahora voy a activar ese botón de pausa, así que voy a decir carrusel pausa.
Así que esa es la identificación que le di al botón de pausa allí.
Así que esa es la razón para dar la identificación,
así que quiero activar el botón de pausa.
Así que digo cuando el usuario hace clic.
Para que pueda ver cómo leer la sintaxis.
Entonces esto dice, para el botón de pausa carrusel,
si el usuario realiza una acción de clic, ejecute
esta función particular que especifico dentro de este código aquí.
¿ Cuál es la función que quiero hacer?
Quiero ser capaz de
pausar el carrusel.
Así que diríamos, carrusel ('pausa').
Así que ahora ves cómo has usado los controles basados en jQuery.
Los controles de JavaScript que se dan para el componente Bootstrap Carousel y
escribieron algún código para poder controlar el Carrusel.
Del mismo modo, quiero poder activar el botón de reproducción.
Así que cuando se hace clic en el botón de reproducción,
quiero que se reanude la acción deslizante del carrusel.
Así que simplemente copiaré este código, lo pegaré allí.
Y luego diría carrusel play,
haga clic en función de mi carrusel y luego la función dice carrusel ('ciclo').
Así es como especificas que el carrusel
debe reanudar el deslizamiento como antes.
Así que esta, esta función que estamos adjuntando al botón de reproducción aquí.
Así que con estos dos,
nuestra función se introduce dentro de esta función lista de documentos.
Estás listo para activar el Carrusel,
y los dos botones para poder controlar el comportamiento de nuestro Carrusel.
Así que vamos a mostrar los cambios, y vamos a echar un vistazo al comportamiento de nuestro Carrusel. Al
ir a nuestra página, ahora ves que tu Carrusel se mueve muy rápido,
porque establecí el intervalo a 2.000 milisegundos o 2 segundos.
Así que cada dos segundos, verá la acción deslizante del carrusel.
Esto es definitivamente molesto.
Así que permítanme hacer una pausa haciendo clic en el botón de pausa.
Así que cuando haces clic en el botón de pausa, la acción de deslizamiento de tu carrusel se detiene.
Porque al hacer clic en el botón de pausa, entonces la función que
introdujimos en el código JavaScript entra en acción y
luego pausa el movimiento del carrusel.
Ahora, si desea reanudar, haga clic en el botón de reproducción y
luego el carrusel debería reanudar su movimiento.
Como puede ver, en el momento en que hace clic en un botón de reproducción, el carrusel comienza a moverse.
Ahora, por supuesto, usted puede mejorar más sobre cómo crear estos botones y así sucesivamente,
pero esta es una manera simple que podemos introducir para controlar nuestro Carrusel.
Este ejercicio ilustra cómo podemos usar el código JavaScript
para poder controlar nuestros componentes basados en JavaScript de Bootstrap.
Este es un buen momento para hacer un comentario de
su código con el mensaje Bootstrap jQuery.
[ MÚSICA]