Presentación de diapositivas de carrusel de Bootstrap múltiple

¿Cómo agrego el control deslizante de presentación de diapositivas de carrusel de Bootstrap múltiple en una sola página o una página?

En este tutorial, proporcionamos una muestra del código fuente en funcionamiento. Primero, descargue el código de muestra usando el botón Descargar código en la parte inferior de la página.

Agregar y crear múltiples controles deslizantes de carrusel de arranque en la página es muy fácil y simple.

Entonces, comencemos con el código de muestra.

Una vez completada la descarga del código fuente, obtendrá un archivo zip "multiple-bootstrap-carousels.zip". Extraiga el archivo zip en cualquier lugar del sistema informático local.

Después de la extracción, encontrará un directorio llamado "multiple-bootstrap-carousels", en ese directorio obtendrá los siguientes activos:

1. Directorio CSS
2. Directorio de fuentes
3. Directorio de Imágenes
4. Directorio JS
5. Directorio CSS
6. Archivo HTML – múltiples-bootstrap-carruseles.html

¿Cuáles son estos testimonios?

Estos activos son necesarios para crear un control deslizante de carrusel múltiple de arranque.

• El directorio CSS contiene un archivo "bootstrap.min.css" que se utiliza para diseñar páginas HTML receptivas.
• El directorio de fuentes es utilizado por bootstrap CSS para generar los diversos íconos gráficos construidos. Control de navegación de flecha deslizante de carrusel también generado por esto. Puedes consultar aquí.
• El directorio de imágenes contiene todas las imágenes que usaremos en las diapositivas del control deslizante del carrusel.
• El directorio JS contiene 2 archivos js "jquery.min.js" y "bootstrap.min.js". un archivo jquery.min.js es una biblioteca de JavaScript cuyo propósito es que jquery use JavaScript en los sitios web. un archivo bootstrap.min.js es un archivo de biblioteca bootstrap framework js que se utiliza para crear carruseles de arranque, formularios de modelos, información sobre herramientas, pestañas, etc. El archivo bootstrap.min.js depende del archivo jquery.min.js, necesita cargar primero antes de usar bootstrap js. Puede explorar más sobre el archivo de la biblioteca bootstrap js aquí.
• El archivo HTML (multiple-bootstrap-carousels.html) contiene todo el diseño y parte del código de varios controles deslizantes de carrusel.

aprendamos más sobre el archivo multiple-bootstrap-carousels.html.

Debe abrir el archivo HTML en cualquier editor de código. Si no tiene una herramienta de edición de código instalada en la computadora, aquí encontrará algunas herramientas de edición de código de tarifa, descargue e instale cualquier herramienta de edición de código:

En la sección Head, hemos cargado todos los archivos CSS y js requeridos y cuatro códigos JS de carrusel como se muestra a continuación:

Código

 <cabeza>
 <title>Ejemplo de presentación de diapositivas de carrusel de Bootstrap múltiple</title>
 <juego de caracteres meta="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 
 <!-- biblioteca css de arranque -->
 <enlace rel="hoja de estilo" href="css/bootstrap.min.css">
 
 <!-- última biblioteca de jQuery (cargue esta biblioteca primero) -->
 <guión src="js/jquery.min.js"></guión>
 
 <!-- biblioteca bootstrap js -->
 <secuencia de comandos src="js/bootstrap.min.js"></secuencia de comandos>
 
 <!-- carrusel personalizando el código css -->
 <estilo>
 .carrusel {
 /* puede agregar css personalizado aquí como el ancho de la altura del control deslizante */
 }
 </estilo>
 
 <!-- código js del carrusel -->
 <script>

 /* primer carrusel de diapositivas */
 $('#carrusel-1').carrusel({
      // Cantidad de tiempo de retraso entre deslizamiento de ciclo, si es falso, no hay ciclo
      intervalo: 500,

      // Pausa la diapositiva al ingresar con el mouse y continúa al salir del mouse.
      pausa: "flotar",

      // Si el carrusel debe circular continuamente o tener paradas bruscas.
      envoltura: cierto,

      // Si el carrusel debe reaccionar a los eventos del teclado.
      teclado: cierto
 });
 
 
 /* segunda presentación de diapositivas del carrusel */
 $('#carrusel-2').carrusel({
      intervalo: 1000,
      envoltura: cierto,
      teclado: cierto
 });
 
 
 /* tercer carrusel de diapositivas */
 $('#carrusel-3').carrusel({
     intervalo: 2000,
     envoltura: cierto,
     teclado: cierto
 });
 
 
 /* cuarta presentación de diapositivas del carrusel */
 $('#carrusel-4').carrusel({
     intervalo: 3000,
     envoltura: cierto,
     teclado: cierto
 });
 </script>
 </cabeza>

En la sección Cuerpo, estamos definiendo el código HTML de dos carruseles. Ahora, explicando el funcionamiento del primer código deslizante. Hemos dividido un div de clase de fila en dos columnas usando la clase col-md-6. Y en la primera columna, agregamos el código HTML del primer control deslizante del carrusel, igual que a continuación.

 <div clase="fila">
 <!-------------- inicio de la primera columna -------------->
 <div clase="col-md-6">
  <div class="jumbotron">
   <center><h3>Carrusel Uno</h3></center>
   <!-------------- inicio de la primera presentación de diapositivas del carrusel -------------->
   <div class="deslizamiento de carrusel" data-ride="carrusel">
   <!-- viñetas de diapositivas -->
   <ol class="carrusel-indicadores">
    <li data-target="#carousel-1" data-slide-to="0" class="active"></li>
    <li data-target="#carrusel-1" data-slide-to="1"></li>
    <li data-target="#carrusel-1" data-slide-to="2"></li>
   </ol>

   <!-- envoltorio para diapositivas -->
   <div class="carrusel-inner" role="listbox">
    
    <!-- diapositivas 1 -->
    <div class="elemento activo">
     <img src="images/girl-1.jpg" alt="Chania">
    </div>
 
    <!-- diapositivas 2 -->
    <div clase="elemento">
     <img src="images/girl-2.jpg" alt="Chania">
    </div>
 
    <!-- diapositivas 3 -->
    <div clase="elemento">
     <img src="imágenes/niña-3.jpg" alt="Flor">
    </div>

   </div>

   <!-- flechas de control de diapositivas izquierda y derecha -->
   <a class="control de carrusel izquierdo" href="#carrusel-1" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Anterior</span>
   </a>
   <a class="right carrusel-control" href="#carrusel-1" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Siguiente</span>
   </a>
  </div>
  <!-------------- fin de la presentación de diapositivas del primer carrusel -------------->
  </div>
 </div>
 <!-------------- final de la primera columna -------------->
</fila>

Hay tres partes del control deslizante del carrusel en el código HTML anterior

• Balas deslizantes
• Diapositivas de imagen
• Navegación deslizante

La sección Slider Bullets está construida usando la etiqueta de lista de pedidos de HTML. <ol> usa una clase llamada carousel-indicators , que se define en el archivo CSS de arranque. Y cada etiqueta <li> tiene un atributo data-target=”#carrusel-1″ donde #carrusel-1 es el mismo ID que estamos usando en el código js del primer carrusel en el código de ejemplo.

La sección Slider Image Slides tiene un div con un elemento de clase. En cada uno de este div, hemos agregado una etiqueta de imagen para cargar la imagen de la diapositiva.

La navegación deslizante se utiliza para navegar por las diapositivas de imágenes hacia la izquierda o hacia la derecha. Las flechas de navegación se crean mediante iconos gráficos de arranque llamados Glyphicon . Los botones de navegación están envueltos en la etiqueta de anclaje <a> con función de atributo de datos de carrusel de arranque y con clase de control de carrusel . En la etiqueta <a> en el atributo href , hemos agregado el mismo ID ( #carousel-1 ) que agregamos antes en la parte de las viñetas del control deslizante. Este ID se utiliza en el código js de la primera presentación de diapositivas del carrusel para activar la funcionalidad del primer control deslizante en el código HTML del primer control deslizante.

En nuestro segundo código del control deslizante, hemos asignado otro ID #carrusel-2 para las tres partes del código del control deslizante, como en el código js del segundo control deslizante, las viñetas del segundo control deslizante y el código HTML de navegación.

¡Esperar! Ustedes encuentran que el tutorial y el código de ejemplo son descriptivos y funcionan para ustedes. Hemos comentado todas y cada una de las secciones del código en el ejemplo, para que pueda entender fácilmente todos y cada uno de los códigos.

Chicos, si tienen alguna sugerencia sobre el idioma del tutorial y el código de ejemplo descargable, escríbannos a nuestro correo. Nuestra dirección de correo electrónico es awordpresslife{at}gmail{dot}com

Gracias por leer, usar y apoyar este tutorial.

Encuentre los enlaces de referencias útiles debajo de los cuales buscamos escribir este tutorial para usted: