命名空間樣式中斷引導程序輪播過渡

我有一個Bootstrap Carousel顯示上一張和下一張圖片。我有一個以上的Bootstrap Carousel，所以我需要不同的風格。這樣做打破了過渡。

如果你在scss文件中評論.namespace命名空間，你會發現它工作正常。爲什麼這會打破？什麼是可能的修復？

見Not Working Fiddle
見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%; 
    } 
}

個

//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)); 
     } 
    }); 
});

引導 v3.3.6
jQuery的 v1.11.0

來源

2016-05-25 tehlivi

的兩個你撥弄輸出看起來是一樣的。也許你已經解決了這個？我正在使用最新版本的Mozilla Firefox在Mac上查看它們。也許這是一個瀏覽器特定的問題？

看起來您的轉換與默認引導程序的東西「戰鬥」。它並不像那裏有.namespace那樣，它是關於改變CSS的位置，而JS也在改變位置。

我已經對你的小提琴做了幾個快速修改 - https://jsfiddle.net/TinaBellVance/gavgngng/1/

來源

2016-05-26 13:08:56

你使用的是什麼瀏覽器？我在Mac上運行Chrome。但是，我只是嘗試Firefox，幻燈片切換根本沒有做任何事情。 – tehlivi

我正在運行Firefox 46.0.1。但我確實在Chrome中看到了這個問題（使用50.0.2661.102）。 –

命名空間樣式中斷引導程序輪播過渡

回答

相關問題