El complemento Bootstrap Carousel es una forma flexible y receptiva de agregar controles deslizantes a su sitio. Además de eso, el contenido es lo suficientemente flexible como para ser una imagen, un marco incrustado, un video o cualquier otro tipo de contenido que desee colocar.
Si desea hacer referencia a la funcionalidad del complemento por separado, debe hacer referencia a Carousel.js. O, como se menciona en el capítulo de descripción general del complemento Bootstrap , puede consultar bootstrap.js o versiones comprimidas de bootstrap.min.js.
1. Ejemplo
A continuación se muestra una diapositiva simple que muestra un componente común de un elemento de bucle usando el complemento de carrusel de bootstrap. Para implementar Carousel, solo necesita agregar el código con esa marca. No es necesario usar atributos de datos, solo un simple desarrollo basado en clases.
<!DOCTYPE html><html><head> <title>Bootstrap instance- Simple Carousel plug-in</title> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="/scripts/jquery.min.js"></script> <script src="/bootstrap/js/bootstrap.min.js"></script><body> <div id="myCarousel"> <!-- Carousel indicator--> <ol> <li data-target="#myCarousel" data-slide-to="0"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target = "#myCarousel" data-slide-to = "2"> </li> </ol> <!-Project Carousel-> <div> <img src = "/medios/uploads/2014/07/slide1.png"> </div> <div> <img src = "/medios/uploads/2014/07/slide2.png" <img src = "/medios/uploads/2014/07/slide3.png"> </div> </div> <!-Carousel Navigation-> <a href = "#myCarousel" data-slide = "previo"> ‹/a> <a href ="#myCarousel "Data-slide =" siguiente "> Dis> <A> <Ad divir </body> </html>
Los resultados son los siguientes:
Complemento de carrusel simple
2. Título opcional
Puede agregar un título a la diapositiva a través del elemento.-Caption-Caption dentro del .Item. Simplemente coloque cualquier HTML opcional allí y se alineará y formateará automáticamente. El siguiente ejemplo demuestra esto:
; src="/bootstrap/js/bootstrap.min.js"></script><body> <div id="myCarousel"> <!-- Carousel indicator--> <ol> <li data-target="#myCarousel" data-slide-to="0"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target = "#myCarousel" data-slide-to = "2"> </li> </ol> <!-Project Carousel-> <div> <img src = "/medios/uploads/2014/07/slide1.png"> <div> title 1 </div> </div> <div> <d <mg src = "/medios/uploads/2014/07/07/07/slide2.png" <div> Título 2 </div> </div> <div> <img src = "/medios/uploads/2014/07/slide3.png"> <div> title 3 </div> </div> </div> <!-Carousel Navigation-> <a href = "#myCarousel" Data-slide = "previo"> ‹■< <a href ="#"myCarOlel" data-slide = "next" >› </a> </div> </body> </html>
Los resultados son los siguientes:
Título del complemento de Carousel
3. Uso
A través del atributo de datos: utilizando los atributos de datos, es fácil controlar la posición del carrusel.
El deslizamiento de datos de la propiedad acepta la palabra clave anterior o al lado para cambiar la posición de la diapositiva en relación con la posición actual.
Use datos de deslizamiento para un índice de deslizamiento en bruto en la parte inferior del lecho del carrusel. Data-Slide-To = "2" moverá el control deslizante a un índice específico, y el índice cuenta desde 0.
La propiedad Data-Ride = "Carousel" se utiliza para marcar el carrusel que inicia la reproducción de animación cuando se carga la página.
A través de JavaScript: Carousel se puede llamar manualmente a través de JavaScript, como se muestra a continuación:
$ ('. Carousel'). Carousel ()
4. Opciones
Hay algunas opciones pasadas a través de propiedades de datos o JavaScript. La siguiente tabla enumera estas opciones:
V. Método
Aquí hay algunos métodos útiles en los complementos de carrusel:
VI. Ejemplo
El siguiente ejemplo demuestra el uso del método:
<!DOCTYPE html><html><head> <title>Bootstrap instance - Carousel plug-in method</title> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="/scripts/jquery.min.js"></script> <script src="/bootstrap/js/bootstrap.min.js"></script><body> <div id="myCarousel"> <!-- Carousel indicator--> <ol> <li data-target="#myCarousel" data-slide-to="0"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target = "#myCarousel" data-slide-to = "2"> </li> </ol> <!-Project Carousel-> <div> <img src = "/medios/uploads/2014/07/slide1.png"> </div> <div> <img src = "/medios/uploads/2014/07/slide2.png" <img src = "/medios/uploads/2014/07/slide3.png"> </div> </div> <!-Carousel Navigation-> <a href = "#myCarousel" data-slide = "anterior"> ‹/a> <a href ="#myCarousel "Data-slide =" SIGUIEN style = "text-align: center;"> <input type = "button" value = "start"> <input type = "button" value = "pause"> <input type = "button" value = "deslizamiento anterior"> <input type = "button" value = "Slide"> <input type = "Botón" Valor = "Slide 1"> <Input type = "Button" Valor = "Slide 2"> <Input type = "Botón" Botón "Valor" Slide 3 "" "Valor" "". </div> </div> <script> $ (function () {// inicialize Carousel $ (". start-slide"). Click (function () {$ ("#myCarousel"). Carousel ('ciclo');}); // detener el carousel $ (". Pause-slide"). Click (function () {$ ("#myCarouselel"). Carousel ('Pause-slide "). }); $ (". Next-Slide"). Click (function () {$ ("#MyCarousel"). Carousel ('Next');}); $ ("#myCarousel"). Carousel (1); }); </script> </body> </html>Los resultados son los siguientes:
Método de complemento de carrusel
7. Eventos
La siguiente tabla enumera los eventos que se utilizarán en el complemento de Carousel. Estos eventos se pueden usar como ganchos en las funciones.
Ejemplo
El siguiente ejemplo demuestra el uso de eventos:
<!DOCTYPE html><html><head> <title>Bootstrap instance- Carousel plug-in event</title> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="/scripts/jquery.min.js"></script> <script src="/bootstrap/js/bootstrap.min.js"></script><body> <div id="myCarousel"> <!-- Carousel metric--> <ol> <li data-target="#myCarousel" data-slide-to="0"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target = "#myCarousel" data-slide-to = "2"> </li> </ol> <!-Project Carousel-> <div> <img src = "/medios/uploads/2014/07/slide1.png"> </div> <div> <img src = "/medios/uploads/2014/07/slide2.png" <img src = "/medios/uploads/2014/07/slide3.png"> </div> </div> <!-Carousel Navigation-> <a href = "#myCarousel" data-slide = "anterior"> ‹/a> <a href ="#myCarousel "Data-slide =" SIGUIEN $ ('#myCarousel'). on ('slide.bs.carousel', function () {alert ("flashea el evento inmediatamente cuando se llama el método de instancia de deslizamiento");}); }); </script> </body> </html>Los resultados son los siguientes:
Eventos de complemento de carrusel
Según el tutorial anterior, hice mi propio ejemplo:
El complemento de carrusel reproduce varias imágenes grandes del mismo tamaño en orden.
// Ejemplo básico. <div id = "myCarousel"> <ol> <li data-Target = "#myCarousel" data-slide-to = "0"> </li> <li data-target = "#myCarousel" data-slide-To src = "img/slide1.png"> </div> <div> <img src = "img/slide2.png"> </div> <div> <img src = "img/slide2.png"> </shiv> <div> <img src = "img/slide3.png"> </div> <a href = " data-slide = "prev"> ‹</a> <a href = "#mycarousel" data-slide = "next" >› </a> </div>
Explicación del atributo de datos:
1.-Data-Slide acepta la palabra clave anterior o al lado para cambiar la posición de la diapositiva en relación con la posición actual;
2.-Data-Slide-To crea un índice deslizante original en la parte inferior del carrusel. Data-Slide-To = "2" moverá el control deslizante a un índice específico, y el índice cuenta desde 0.
3.Data-Ride = "CAROUSEL" ATRIBUTO Etiqueta de usuario Carrusel inicia la reproducción de animación cuando la página está cargada.
Si lo llama a JavaScript, use el método de par de valor clave directamente y elimine los datos;
// Establecer propiedades personalizadas
$ ('#myCarousel'). Carousel ({// Establecer reproducción automática/2 segundos Intervalo: 2000, // Establezca la pausa del evento: 'hover', // jugar solo una vez envuelto: falso,});El complemento Carousel también proporciona algunos métodos, como sigue:
// Haga clic en el botón para ejecutar $ ('botón'). ON ('Click', function () {// Después de hacer clic, $ ('#myCarousel'). Carousel ('ciclo'); // otro similar});evento
$ ('#myCarousel'). on ('slide.bs.carousel', function () {alert ('libre inmediatamente cuando se llama el modo de instancia de diapositiva');}); $ ('#myCarousel'). on ('slid.bs.carousel', function () {alerta ('gratis cuando el carrusel completa una diapositiva');});Para obtener más contenido, consulte: Tutorial de aprendizaje de Bootstrap
Lo anterior se trata de este artículo. Espero que sea útil para todos aprender el complemento Bootstrap Carousel.