javascript - multiple - carousel bootstrap responsive

Twitter Bootstrap Carousel no se inicia automáticamente

Question

Tengo un carrusel en mi sitio que fue creado con Twitter Bootstrap. No estoy seguro de por qué no se inicia automáticamente cuando la página se carga, no se inicia hasta que hace clic en la flecha para avanzar a la siguiente diapositiva, luego se activa el temporizador. Desde la documentación de arranque, dice que se puede inicializar. con este objeto, pero ¿dónde pongo esto?

$(''.carousel'').carousel({
  interval: 2000
})

Mi sitio tiene dos archivos javascript, jquery-1.7.2.min.js y bootstrap.min.js.

Answer 1

Esto me pasó a mí. Pero, hay una opción que está en pausa: ''pasar'' que es la configuración predeterminada.

Y esta opción hizo que mi control deslizante de pantalla completa se detuviera, por supuesto, incluso en la primera diapositiva.

Answer 2

He estado sentado durante meses sobre esto, cada vez que precompilaba los activos, algo estaba mal en la carpeta pública / de activos, por lo que algo no funcionaba. Necesitaba copiar activos antiguos en la carpeta pública / activos para que funcionen. Durante mucho tiempo traté de averiguar en qué orden deben estar las importaciones y cuáles requieren que las declaraciones estén destruyendo cosas que ya están funcionando.

Mi solución después de todo este tiempo es, necesito importar estos:

//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require_tree .

Y nunca ponga un script, por ejemplo, un script de inicio-carrusel en el archivo application.js. Si lo coloco en el archivo application.html.erb como este:

<%= javascript_include_tag "application" %>

  <script type=''text/javascript''>
      $(document).ready(function() {
          $(''.carousel'').carousel({
              interval: 3000
          })
      });
  </script>

Todo funciona bien. Aviso: es necesario que esté bajo la aplicación include_tag otherwhise No puedo trabajar.

Aviso 2: También tengo un script de googlemaps, pero solo se importa (!) En el archivo donde vive el mapa. Es este guión:

<script src="https://maps.googleapis.com/maps/api/js?key=KEY&sensor=false"></script>

Realmente espero que esto ayude a otras personas a ahorrar su tiempo. Hay algunas cosas que no son tan obvias.

Answer 3

No necesita ningún código javascript, puede configurarlo para que cambie automáticamente usando el atributo de data-interval="1000"

La cantidad de tiempo para retrasar entre el ciclo automático de un elemento. Si es falso, el carrusel no ciclará automáticamente.

<div id="carousel-example-generic" class="carousel slide" data-interval="1000" data-ride="carousel">

http://getbootstrap.com/javascript/#carousel

Answer 4

Pensé que añadiría algo sobre bootstrap 3 trabajando en angular.

Dependiendo de la extensión de su aplicación dentro de Angular, podría haber un ligero retraso en la carga del carrusel. Por ejemplo, tengo el carrusel cargando como una plantilla, que se carga ligeramente después de que se carga el documento, por lo tanto, tuve que agregar un ligero tiempo de espera para que el código inicie el carrusel.

        <div class="mWeb-container" ng-controller="mWebCtrl">
        <div ng-include="nav_tpl" ng-hide="print_layout"></div>
        <div ng-include="carousel_tpl" ng-hide="print_layout"></div>
        <div ng-include="breadcrumbs_tpl" ng-hide="print_layout"></div>
        <div ng-view=""></div>
        <div ng-include="comments_tpl" ng-hide="print_layout"></div>
        <div ng-include="footer_tpl" ng-hide="print_layout"></div>
    </div>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="angular/scripts/vendor/bootstrap.min.js"></script>
    <script type="text/javascript">
    <!--
        $(document).ready(function(){
            var mCarouselTO = setTimeout(function(){
            $(''#Carousel'').carousel({
                interval: 3000,
                cycle: true,
            }).trigger(''slide'');
            }, 2000);
            var q = mCarouselTO;
        });
    -->
    </script>

Answer 5

Solo para agregar para aquellos de ustedes que usan reaccionar, hacer lo siguiente activará el ciclo:

componentDidMount(){
    this.setState({activeIndex:0})
}

Answer 6

Suponiendo que tenga todo lo demás en su lugar, intente agregar esto antes de la etiqueta de cuerpo de cierre:

<script type=''text/javascript''>
    $(document).ready(function() {
         $(''.carousel'').carousel({
             interval: 2000
         })
    });    
</script>

Answer 7

Tuve el mismo problema, así que descubrí que me perdí el data-ride="carousel" del booturap caruosel. Comprueba eso en tu código. Enlace a Bootstrap doc

Answer 8

Tuve tu mismo problema y encontré la solución; Como ambos pusimos los javascripts al final de la página, la llamada de la función debe ponerse después de ellos:

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>

<script type="text/javascript">
  var $ = jQuery.noConflict();
  $(document).ready(function() { 
      $(''#myCarousel'').carousel({ interval: 3000, cycle: true });
  }); 
</script>

http://twitterbootstrap.org/twitter-bootstrap-3-carousel-not-automatically-starting/