Namensraumstile brechen Bootstrap Karussell Übergang

Question

Namensraum Stile bricht Übergänge.

Ich habe ein Bootstrap-Karussell, das das vorherige und das nächste Bild anzeigt. Ich habe mehr als ein Bootstrap-Karussell, also brauche ich verschiedene Stile für jeden. Dies unterbricht den Übergang.

Wenn Sie die .namespace Namespace in der scss-Datei kommentieren und Sie werden sehen, es funktioniert gut. Warum bricht das? Was ist eine mögliche Lösung?

SieheNot Working Fiddle
Siehe Working Fiddle

HTML

<div class="container-fluid namespace"> 
    <div class="row"> 
     <div class="col-md-12 center-block"> 
      <div class="carousel slide" id="myCarousel"> 
       <div class="carousel-inner"> 
        <div class="item active"> 
         <div class="col-xs-4"> 
          <a href="#"><img src="http://aszx.altervista.org/aatest/img/carousel/carousel-001.jpg" class="img-responsive"></a> 
         </div> 
        </div> 
        <div class="item"> 
         <div class="col-xs-4"> 
          <a href="#"><img src="http://aszx.altervista.org/aatest/img/carousel/carousel-002.jpg" class="img-responsive"></a> 
         </div> 
        </div> 
        <div class="item"> 
         <div class="col-xs-4"> 
          <a href="#"><img src="http://aszx.altervista.org/aatest/img/carousel/carousel-003.jpg" class="img-responsive"></a> 
         </div> 
        </div> 
       </div> 
       <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a> 
       <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a> 
      </div> 
     </div> 
    </div> 
</div> 

CSS

.namespace { 
    .carousel { 
     overflow: hidden; 
    } 

    .carousel-inner { 
     width: 150%; 
     left: -25%; 
    } 

    .carousel-inner > .item.next, 
    .carousel-inner > .item.active.right { 
     left: 0; 
     -webkit-transform: translate3d(33%, 0, 0); 
     transform: translate3d(33%, 0, 0); 
    } 

    .carousel-inner > .item.prev, 
    .carousel-inner > .item.active.left { 
     left: 0; 
     -webkit-transform: translate3d(-33%, 0, 0); 
     transform: translate3d(-33%, 0, 0); 
    } 

    .carousel-control.left, 
    .carousel-control.right { 
     background: rgba(255, 255, 255, 0.3); 
     width: 25%; 
    } 
} 

JS

//original code from http://jsbin.com/jadahetoxi/3/edit?html,css,js,output 

$(document).ready(function() { 
    $('#myCarousel').carousel({ 
     interval: 10000 
    }) 
    $('.carousel .item').each(function() { 
     var next = $(this).next(); 
     if (!next.length) { 
      next = $(this).siblings(':first'); 
     } 
     next.children(':first-child').clone().appendTo($(this)); 
     if (next.next().length > 0) { 
      next.next().children(':first-child').clone().appendTo($(this)); 
     } else { 
      $(this).siblings(':first').children(':first-child').clone().appendTo($(this)); 
     } 
    }); 
}); 

Bootstrap v3.3.6
jQuery v1.11.0

Answer 1

Beide Ihrer Geige Ausgänge gleich aussehen. Vielleicht hast du das schon gelöst? Ich sehe sie in der neuesten Version von Mozilla Firefox, auf einem Mac. Vielleicht ist es ein Browser-spezifisches Problem?

Es scheint, dass Ihre Übergänge mit dem Standard-Bootstrap-Zeug "kämpfen". Es geht nicht so sehr darum, .namespace drin zu haben, es geht darum, die Position in CSS zu ändern, während JS auch die Position ändert.

Ich habe ein paar schnelle Änderungen an Ihrer Geige getan - https://jsfiddle.net/TinaBellVance/gavgngng/1/