Mi clase de carrusel de bootstrap no está funcionando -- twitter-bootstrap camp Relacionados El problema

My Bootstrap carousel class is not working


1
vote

problema

Español

He creado un bootstrap de carrusel, pero no está funcionando. El carrusel es un tipo deslizante y 2 imágenes deben incrustarse en las etiquetas "IMG". Por favor ayuda si hay algo mal. Gracias.

  <!DOCTYPE html>  <html lang="en">  <head>    <title>TATTOO</title>      <meta charset="utf-8">      <meta class="viewport" content="width=device-width, initial-scale=1">      <!-- Latest compiled and minified CSS -->  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">    <!-- Optional theme -->  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">    <!-- Latest compiled and minified JavaScript -->  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>    </head>  <body>          <div class="container-fluid">   <div class="row">          <div class="col-xs-12" id="gifdivision">        <!-- adding the carousel slider-->        <div class="carousel slide" id="myslider" data-ride="carousel">            <div class="item active">                <img src="#some image here">                <div class="carousel-caption"><h2>caption here 1</h2></div><!--this is the carousel caption-->            </div>            <div class="item">                <img src="#some image here">                <div class="carousel-caption"><h2>caption here        2</h2></div><!--this is the carousel caption-->            </div>        </div><!-- this is the carousel slide div-->       </div><!-- end of col-xs-12 -->    </div><!-- end of 1st row-->   </div><!--end of container-->  </body>  </html>  
Original en ingles

I have created a carousel bootstrap but it is not working. The carousel is slider type and 2 images are to be embedded in the "img" tags. Please help if there is something wrong. Thank you.

<!DOCTYPE html>  <html lang="en">  <head>    <title>TATTOO</title>      <meta charset="utf-8">      <meta class="viewport" content="width=device-width, initial-scale=1">      <!-- Latest compiled and minified CSS -->  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">    <!-- Optional theme -->  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">    <!-- Latest compiled and minified JavaScript -->  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>    </head>  <body>          <div class="container-fluid">   <div class="row">          <div class="col-xs-12" id="gifdivision">        <!-- adding the carousel slider-->        <div class="carousel slide" id="myslider" data-ride="carousel">            <div class="item active">                <img src="#some image here">                <div class="carousel-caption"><h2>caption here 1</h2></div><!--this is the carousel caption-->            </div>            <div class="item">                <img src="#some image here">                <div class="carousel-caption"><h2>caption here        2</h2></div><!--this is the carousel caption-->            </div>        </div><!-- this is the carousel slide div-->       </div><!-- end of col-xs-12 -->    </div><!-- end of 1st row-->   </div><!--end of container-->  </body>  </html>
  
   
   

Lista de respuestas

2
 
vote
vote
La mejor respuesta
 

Te estás perdiendo jQuery, y el marcador del carrusel está mal.

BOOTSTRAP 3.X CAROUSEL NECESITA carousel-inner AROD EL item S ...

  async0  

http://www.codeply.com/go/6koiowgy1u

 

You're missing jQuery, and the carousel markup is wrong.

Bootstrap 3.x Carousel needs carousel-inner aroud the items...

<div class="container-fluid">     <div class="row">         <div class="col-xs-12" id="gifdivision">             <!-- adding the carousel slider-->             <div class="carousel slide" id="myslider" data-ride="carousel">                 <div class="carousel-inner">                     <div class="item active">                         <img src="//placehold.it/1200x400" class="center-block">                         <div class="carousel-caption">                             <h2>caption here 1</h2></div>                         <!--this is the carousel caption-->                     </div>                     <div class="item">                         <img src="//placehold.it/1200x400" class="center-block">                         <div class="carousel-caption">                             <h2>caption here        2</h2></div>                         <!--this is the carousel caption-->                     </div>                 </div>             </div>             <!-- this is the carousel slide div-->          </div>         <!-- end of col-xs-12 -->     </div>     <!-- end of 1st row--> </div> <!--end of container--> 

http://www.codeply.com/go/6koiOwGY1U

 
 

Relacionados problema

2  Las pestañas de Bootstrap, altura izquierda  ( Bootstraps tabs left height ) 
Utilizo las pestañas de Bootstrap con tabs-left6 clase. Sin embargo, si el contenido de un lo suficientemente grande, la frontera entre el menú y el conteni...

12  El menú Bootstrap desaparece después del primer clic, configurando el estilo UL para ninguno  ( Bootstrap menu disappears after first click setting the ul style to none ) 
Estoy tratando de hacer una nueva plantilla de WordPress con bootstrap. El menú desplegable no funciona correctamente. Después del segundo clic, se muestra: N...

0  Mesa de bootstrap desbordando los padres CSS  ( Bootstrap table overflowing parent css ) 
Tengo una fila de bootstrap que contiene entre otras cosas un div con una mesa dentro. Por una razón desconocida, no puedo lograr que la mesa deje de desborda...

0  Crea un diseño de fluido como bootstrap  ( Create fluid layout like bootstrap ) 
Soy nuevo en HTML / CSS, así que probablemente estoy volviendo a bolsa. Estoy usando Bootstrap, pero el primer día lo usa. Estoy tratando de imitar exactament...

7  ¿Cuál es el signo más antes de una función? [duplicar]  ( What is the plus sign before a function ) 
Esta pregunta ya tiene respuestas aquí : Javascript Signo más frente a la expresión de la función ...

0  Twitter Bootstrap - Margen izquierdo y derecho en IE  ( Twitter bootstrap left and right margin in ie ) 
Estoy usando el último bootstrap de Twitter. Estoy en una etapa temprana para diseñar mi sitio. El problema es, cuando veo el sitio en otros navegadores, ex...

1  Bootstrap Typeahead.js elimina el contenido de los datos existentes en el campo de formulario HTML OnLeave  ( Bootstrap typeahead js deletes content of existing data in html form field onlea ) 
Estoy usando Typeahead en un formulario que ya tiene datos. El problema es: cuando entro y luego deje el campo sin escribir nada, está vaciado por Typehead. ...

3  ¿Cómo puedo personalizar el bootstrap sin perder los cambios?  ( How can i customise bootstrap without losing the changes ) 
Estoy usando Bower para administrar bootstrap y me gustaría hacer algunos cambios (colores, tamaño de fuente, etc.) a la apariencia de bootstrap predeterminad...

-4  Bootstrap Carousel Slider La capacidad de respuesta no funciona  ( Bootstrap carousel slider responsiveness is not working ) 
Hola He usado Bootstrap Carousel Slider en My Slider, pero la capacidad de respuesta móvil no funciona. Aquí está mi código: <div class="mobileimage"> <...

0  ¿Cómo crear una barra de navegación con 2 menú de colapso? [duplicar]  ( How to create a navbar with 2 collapse menu ) 
Esta pregunta ya tiene respuestas aquí : consolidate múltiple bootstrap 3 menús de navatura en colap...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos