web-dev-qa-db-fra.com

Le carrousel Bootstrap ne glisse pas

J'ai essayé d'utiliser le carrousel Bootstrap et j'ai eu du succès dans une certaine mesure. Je peux aussi cliquer et changer les images. Mais j'ai un problème. C'est juste pas glissant! Où est-ce que je me trompe?

html:

<div id="my_carousel" class="carousel slide">

  <ol class="carousel-indicators">
    <li data-target = "#my_carousel" data-slide-to = "0" class="active"></li>
    <li data-target = "#my_carousel" data-slide-to = "1"></li>
    <li data-target = "#my_carousel" data-slide-to = "2"></li>
  </ol>

  <div class="carousel-inner i">

    <div class="item active">
      <img src="images/f3.jpg" alt = "i1" class="img-responsive">
    </div>

    <div class="item">
      <img src="images/f2.jpg" alt = "i2" class="img-responsive">
    </div>

    <div class="item">
      <img src="images/f1.jpg" alt = "i3" class="img-responsive">
    </div>

  </div>

  <a class="carousel-control left" href="#my_carousel" data-slide = "prev">
    <span class="icon-prev left"></span>
  </a>

  <a class="carousel-control right" href="#my_carousel" data-slide = "next">
    <span class="icon-next right"></span>
  </a>
</div>

MODIFIER:

jquery:

<script language="JavaScript" type="text/javascript">
  $(document).ready(function(){
    $('.carousel').carousel({
      interval: 3000
    })
  });    
</script>
<script language="JavaScript" type="text/javascript" src="scripts/jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="scripts/bootstrap.min.js"></script>
jqueryhtmltwitter-bootstrap
15
Robin

Avez-vous inclus ce script:

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

Modifier

Et même si cela ne fonctionne pas, vérifiez si vous appelez le script ci-dessus avant d'appeler jQuery. Donc, ça devrait être comme ça:

<!-- Calling jquery first -->
<script language="JavaScript" type="text/javascript" src="scripts/jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="scripts/bootstrap.min.js"></script>
  <!-- Carousel -->
<script language="JavaScript" type="text/javascript">
  $(document).ready(function(){
    $('.carousel').carousel({
      interval: 3000
    })
  });    
</script>
19
Kakar

Je viens de télécharger récemment bootstrap carousel (v3.2.0). Cela ne fonctionne pas avec la dernière version de jQuery (v1.11) à cause de cette ligne:

if ($.support.transition && this.$element.hasClass('slide')) {

La partie $.support.transition était réservée à l'usage interne de jQuery et est obsolète. Cette suppression devrait permettre à votre code de fonctionner à nouveau. Mieux encore, vous pouvez/devriez le remplacer par la propriété de détection de fonctionnalité de Modernizr: Modernizr.csstransitions.

UPDATE: De plus, jQuery v11.1 ne prend pas en charge .emulateTransitionEnd. Pour résoudre ces problèmes, assurez-vous que vous incluez transition.js dans votre paquet . Il contient le code suivant:

+function ($) {
  'use strict';

  // CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)
  // ============================================================

  function transitionEnd() {
    var el = document.createElement('bootstrap')

    var transEndEventNames = {
      WebkitTransition : 'webkitTransitionEnd',
      MozTransition    : 'transitionend',
      OTransition      : 'oTransitionEnd otransitionend',
      transition       : 'transitionend'
    }

    for (var name in transEndEventNames) {
      if (el.style[name] !== undefined) {
        return { end: transEndEventNames[name] }
      }
    }

    return false // explicit for ie8 (  ._.)
  }

  // http://blog.alexmaccaw.com/css-transitions
  $.fn.emulateTransitionEnd = function (duration) {
    var called = false
    var $el = this
    $(this).one('bsTransitionEnd', function () { called = true })
    var callback = function () { if (!called) $($el).trigger($.support.transition.end) }
    setTimeout(callback, duration)
    return this
  }

  $(function () {
    $.support.transition = transitionEnd()

    if (!$.support.transition) return

    $.event.special.bsTransitionEnd = {
      bindType: $.support.transition.end,
      delegateType: $.support.transition.end,
      handle: function (e) {
        if ($(e.target).is(this)) return e.handleObj.handler.apply(this, arguments)
      }
    }
  })

}(jQuery);
8
Ryan Taylor

La réponse de Ryan Taylor m'a aidé avec ce problème, mais au lieu de supprimer le chèque de $ .support.transition de carousel.js, j'ai ajouté ce petit correctif JS à mon build pour combler le vide laissé par jQuery:

https://Gist.github.com/jonraasch/373874#file-jquery-support-transition-js

1
samnau

Bootstrap.js utilise les fonctions de jQuery.js

vous devez donc charger jQuery.js avant Boostrap.js

<script src="jQuery.js"></script>
<script src="bootstrap.js></script>

Dépendances de plugins 

Certains plugins et composants CSS dépendent d’autres plugins. Si vous incluez des plugins individuellement, assurez-vous de vérifier ces dépendances dans la documentation. Notez également que tous les plugins dépendent de jQuery (cela signifie que jQuery doit être inclus avant les fichiers du plugin) . Consultez notre bower.json pour voir quelles versions de jQuery sont supportées.

http://getbootstrap.com/javascript/

1
lozadaOmr

Vous ne devriez pas avoir besoin du javascript. Ce qui suit devrait suffire,

<div id="my_carousel" class="carousel slide container" data-ride="carousel">
0
mre

J'ai eu le même problème et j'ai pu le faire fonctionner en ajoutant cet extrait à mon code.

  <script>
        $(function(){
            // Activate Carousel
            $("#myCarousel").carousel();
        });
    </script>
0
kupaff

Étrange, mais si je supprime DataData () et réinitialise le carrousel, cela fonctionne comme un charme

//Function to animate slider captions
function doAnimations(elems) {
    //Cache the animationend event in a variable
    var animEndEv = 'webkitAnimationEnd animationend';

    elems.each(function () {
        var $this = $(this),
            $animationType = $this.data('animation');
        $this.addClass($animationType).one(animEndEv, function () {
            $this.removeClass($animationType);
        });
    });
}


//Variables on page load
var $myCarousel = $('#myCarousel'),
    $firstAnimatingElems = $myCarousel.find('.item:first').find("[data-animation ^= 'animated']");

//Initialize carousel
$myCarousel.carousel();

//Animate captions in first slide on page load
doAnimations($firstAnimatingElems);

// --------------------------------------------------
//Pause carousel and remove data
$myCarousel.carousel('pause').removeData();

//Re-initialize carousel
$myCarousel.carousel();

//Animate captions in first slide on page load
doAnimations($firstAnimatingElems);
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

//Other slides to be animated on carousel slide event
$myCarousel.on('slide.bs.carousel', function (e) {
    var $animatingElems = $(e.relatedTarget).find("[data-animation ^= 'animated']");
    doAnimations($animatingElems);
});
0
Gennady G

Assurez-vous d'inclure ce lien

<script src="bootstrap/js/bootstrap.min.js"></script>
0
Xcoder