幻燈片之間的空白引導程序傳送帶

當傳送帶自動滑動時沒有問題，但只要我點擊下一個箭頭並且prev箭頭在幻燈片之間出現±140px寬的空白區域。

我檢查了CSS並刪除了HTML中的所有空格，但我沒有運氣。

旋轉木馬HTML：

<div class="clearfix row slider"> 
<div class="clearfix carousel slide col-lg-12 col-md-12 col-sm-12 col-xs-12" data-ride="carousel" id="carousel-example-generic"> 
    <div class="carousel-inner"> 
     <div class="clearfix item active" style='background: url("/Content/Images/media/carousel/hero-test.jpg") no-repeat;'> 
      <div class="clearfix max-width carousel-caption"> 
       <h2>Hello. I'm Lorem. I'm a Slow 
       Cooker.</h2><span class="clearfix">And I'm quickly 
       changing the world</span> 
       <a class='fresco cta' data-fresco-caption="Lorem | How It Works" data-fresco-group='example' href='https://vimeo.com/105705114'>How It Works</a> 
      </div> 
      <video autoplay="" class="bgvid" loop="" poster="/Content/Images/default/video-bg.jpg"> 
       <source src="/Content/Images/media/bkvideo/1_Lorem-marquee.mp4" type="video/webm"> 
       <source src="polina.html" type="video/mp4"> 
      </video> 
     </div> 
     <div class="clearfix item" style='background: url("/Content/Images/media/carousel/1_marquee-2.jpg ") no-repeat;'> 
      <div class="clearfix max-width carousel-caption"> 
       <h2>Get to know Lorem.</h2><span class="clearfix">And learn the Lorem Story</span> 
       <a class="cta" href="/Pages/SarahsStory">Meet Lorem</a> 
      </div> 
     </div> 
    </div> 
    <a class="left carousel-control" data-slide="prev" href="#carousel-example-generic"><span><img alt=" " src="/Content/Images/default/arrow-slider.svg"></span></a> 
    <a class="right carousel-control" data-slide="next" href="#carousel-example-generic"><span><img alt=" " src="/Content/Images/default/arrow-slider.svg"></span></a> 
</div>

鏈接至網站：http://bit.ly/1BcaEb8 - 點擊南非及其主要傳送帶/滑塊

來源

2014-12-03 dk_french032

在你的鏈接沒有滑塊，請做一個工作小提琴，我們可以幫助你:) – 2014-12-03 07:37:34

這是th主頁上的主橫幅/滑塊。請點擊南非。 – 2014-12-03 07:41:17

想通了什麼問題了。我有自定義的CSS .left {float：left;}和.right {float：right;}

當傳送帶滑動時，它向包含div的左側和右側添加類。刪除了我的CSS中的左側和右側花車 - 問題解決了:)

來源

2014-12-03 08:37:18

是的，我有一些非常相似的東西。 – 2015-04-06 21:42:21

將傳送帶內部溢出設置爲可見。

.carousel-內{溢出：可見}

來源

2017-06-05 13:33:16

引導具有由對於圓盤傳送帶，其提供0.6S轉換延遲默認CSS。此轉換顯示了兩張幻燈片之間的空白區域爲了隱藏這些空白區域，我們需要通過重寫css和使用！important來刪除轉換以使其工作。

bootstrap.css

.carousel-inner>.item { 
    display: none; 
    position: relative; 
    -webkit-transition: .6s ease-in-out left; 
    -o-transition: .6s ease-in-out left; 
    transition: .6s ease-in-out left; 
}

的style.css

.carousel-inner>.item { 
    -webkit-transition: 0s !important; 
    -o-transition: 0s !important; 
    transition: 0s !important; 
}

在外部或內部的CSS複製上面的代碼（style.css文件）和隱藏這些白空間

來源

2017-06-29 10:03:24

幻燈片之間的空白引導程序傳送帶

回答

相關問題