Bootstrap carrousel - CSS3 PIE casse cyclisme indicateurs

Question

donc sur un bon nombre de sites que j'aime utiliser CSS3 PIE faire IE 7-9 do décoration rayon de frontière pour les images arrondies etc.

Pour un nouveau site j'utilise la Carousel plugin sur Twitter Bootstrap, et je voudrais obtenir les indicateurs de carrousel rendus joliment pour les utilisateurs d'IE. Mon carrousel fonctionne bien normalement, passant correctement par etc etc, mais quand j'applique le comportement de la TARTE aux indicateurs de carrousel pour les anciens navigateurs IE (en utilisant la version JavaScript de PIE), il empêche les indicateurs de cycler correctement sur la diapositive. Solution évidente consiste à supprimer CSS3 PIE pour les indicateurs de carrousel (les laissant moche pour les utilisateurs de vieux IE), mais idéalement, je voudrais le faire fonctionner.

Head Extrait de code:

<!--[if (IE 7)|(IE 8)]> 
    <script type="text/javascript" src="//cdn.jsdelivr.net/css3pie/2.0b1/PIE_IE678.js"></script> 
<![endif]--> 
<!--[if IE 9]> 
    <script type="text/javascript" src="//cdn.jsdelivr.net/css3pie/2.0b1/PIE_IE9.js"></script> 
<![endif]--> 

Body Code Snippet:

<div id="myCarousel" class="carousel slide"> 
      <ol class="carousel-indicators"> 
       <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
       <li data-target="#myCarousel" data-slide-to="1"></li> 
       <li data-target="#myCarousel" data-slide-to="2"></li> 
      </ol> 
      <div class="carousel-inner"> 
       <div class="item active"> 
        <img src="http://twitter.github.io/bootstrap/assets/img/examples/slide-01.jpg" alt=""/> 
       </div> 
       <div class="item"> 
        <img src="http://twitter.github.io/bootstrap/assets/img/examples/slide-02.jpg" alt=""/> 
       </div> 
       <div class="item"> 
        <img src="http://twitter.github.io/bootstrap/assets/img/examples/slide-03.jpg" alt=""/> 
       </div> 
      </div> 
      <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
      <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a> 
    </div> 

Et puis PIE:

<script type="text/javascript"> 
     $(function() { 
      if (window.PIE) { 
       $('.carousel-indicators li').each(function() { 
        PIE.attach(this); 
       }); 
      } 
     }); 
</script> 

Je suppose que le problème réside dans la façon que nous » Nous avons des indicateurs actifs et inactifs, et ils changent constamment sur la diapositive ... mais je ne suis pas vraiment sûr de savoir comment y remédier.

Le code complet est à http://www.edwardb.co.uk/test/ et vous devrez évidemment utiliser une ancienne version d'IE.

Answer 1

J'ai eu le même problème et trouvé une solution pour le réparer. La raison de ce problème sont les balises css3-conteneurs ajoutés par css3pie:

<ol class="carousel-indicators"> 
    <css3-container ...>...</css3-container> 
    <li>...</li> 
    <css3-container ...>...</css3-container> 
    <li>...</li> 
    ... 
</ol> 

Lorsqu'un élément change de curseur actif, le js carrousel active le n-ième indicateur de carrousel (y compris les CSS3-conteneur-tags). Dans le cas où le premier élément est visible, le premier nœud enfant de "carousel-indicators" a la classe "active". Ma solution est, pour se lier à l'événement "glissé", il est déclenché après que le nouvel élément est activé. Le seul problème de cette solution est que le carrousel js lui-même utilise également l'événement "slid" pour activer l'indicateur courant. Pour cette raison, je viens d'ajouter un appel setTimeout, s'il y a une autre possibilité s'il vous plaît dites-moi.

$('.carousel').on('slid', function(e) { 
    if($('html').is('.lt-ie9')) { 
     var carousel = $(this); 
     var items = $('.carousel-inner .item', carousel); 
     var indicators = $('.carousel-indicators', carousel).children(); 
     if (items.length !== indicators.length) { 
      setTimeout(function() { 
       var active_index = items.filter('.active').index(); 
       indicators.removeClass('active'); 
       $(indicators.filter('li').get(active_index)).addClass('active'); 
      }, 250); 
     } 
     return false; 
    } 
});