javascript carousel教學 Bootstrap Carousel圖像無法正確對齊




slick (10)

請看下面的圖片,我們使用bootstrap旋轉木馬來旋轉圖像。 但是,當窗口寬度較大時,圖像不能正確對齊邊框。

但bootstrap提供的carousel例子總是可以正常工作,不管窗口的寬度如何。 遵循代碼。

有人能解釋為什麼傳送帶行為不同嗎? 這是否與圖像大小或某些引導配置丟失有關?

<section id="carousel">
<div class="hero-unit span6 columns">
    <h2>Welcome to TACT !</h2>
    <div id="myCarousel" class="carousel  slide" >
      <!-- Carousel items -->
      <div class="carousel-inner">
        <div class="item  active" >
            <img alt=""  src="/eboxapps/img/3pp-1.png">
            <div class="carousel-caption">
                <h4>1. Need a 3rd party jar?</h4>
            </div>
        </div>
        <div class="item">
            <img alt=""  src="/eboxapps/img/3pp-2.png">
            <div class="carousel-caption">
                <h4>2. Create Request</h4>
            </div>
        </div>
        <div class="item">
            <img alt=""  src="/eboxapps/img/3pp-3.png">
            <div class="carousel-caption">
                <h4>3. What happens?</h4>
            </div>
        </div>
        <div class="item">
            <img alt=""  src="/eboxapps/img/3pp-4.png">
            <div class="carousel-caption">
                <h4>4. Status is Emailed</h4>
            </div>
        </div>
      </div>
      <!-- Carousel nav -->
      <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
      <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
    </div>
</div>


我想我有一個解決方案:

在您的個人樣式表頁面中,分配寬度和高度以匹配您的圖片尺寸。

在頂部的div上創建一個額外的單獨的“類”,它將佔用空間的跨度...(如下所示)

        <div class="span6 columns" class="carousel">
            <div id="myCarousel" class="carousel slide">
                <div class="carousel-inner">
                <div class="item active">

不用觸摸bootstrap.css,在自己的樣式表中,調用“carousel”(或者您選擇的任何標籤)以匹配原始圖片的寬度和高度!

.carousel       {
            width: 320px;
            height: 200px;

}

所以在我的情況下,我正在使用小型320x200圖像來傳送。 bootstrap.css中可能有預設尺寸,但我不喜歡改變它,所以我可以嘗試在未來版本中保持最新狀態。 希望這有助於~~


對於旋轉木馬,我相信所有的圖像必須是完全一樣的高度和寬度。

另外,當你從bootstrap重新引用scaffolding頁面時,我很確定span16 = 940px。 考慮到這一點,我想我們可以假設,如果你有一個

<div class="row">
     <div class="span4"> 
        <!--left content div guessing around 235px in width -->
     </div>
     <div class="span8">
        <!--right content div guessing around 470px in width -->
     </div>
</div>

所以是的,在一行中設置跨度空間時必須小心,因為如果圖片寬度很大,它會將div發送到下一個“行”,這並不好玩:P

鏈接1


使用引導程序3,只需添加響應式和中心類:

 <img class="img-responsive center-block" src="img/....jpg" alt="First slide">

這會自動進行圖像大小調整,並將圖片居中。

編輯:

使用bootstrap 4,只需添加img-fluid

<img class="img-fluid" src="img/....jpg">

我遇到了同樣的問題並通過這種方式解決了問題:可以將非圖像內容插入Carousel,以便我們可以使用它。 您應該首先插入div.inner-item (您將在其中進行中心對齊),然後在此div內插入圖像。

這是我的代碼(Ruby):

<div id="myCarousel" class="carousel slide">
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="active item">
            <%= image_tag "couples/1.jpg" %>
        </div> 
        <% (2..55).each do |t|%>
            <div class="item">
                <div class='inner-item'>
                    <%= image_tag "couples/#{t}.jpg" %>
                </div>
            </div> 
        <% end -%>
    </div>
    <!-- Carousel nav -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

和我的CSS代碼(.scss):

.inner-item {
    text-align: center;
    img {
        margin: 0 auto;
    }
}

您的圖像的寬度是否與span6完全相同? 在我的情況下,使用不同的圖像尺寸,我在我的圖像上放置了高度屬性,以確保它們都是相同的高度,並且旋轉木馬不會在圖像之間調整大小。

在你的情況下,嘗試設置一個高度,這樣高度和旋轉木馬內部div的寬度之間的比率是相同的aspectRatio圖像


將其插入到您的傳送帶所在的CSS父級div類中。

<div class="parent_div">
     <div id="myCarousel" class="carousel slide">
            <div class="carousel-inner">
              <div class="item active">
                <img src="assets/img/slider_1.png" alt="">
                <div class="carousel-caption">
                </div>
              </div>
            </div>
     </div>      
</div>

CSS

.parent_div { 
margin: 0 auto;
min-width: [desired width];
max-width: [desired width];
}

這可能與你的風格有關。 在我的情況下,我在父項“div”中使用了一個鏈接,所以我不得不改變我的樣式表來說明以下內容:

.carousel .item a > img {
  display: block;
  line-height: 1;
}

根據預先存在的boostrap代碼:

.carousel .item > img {
  display: block;
  line-height: 1;
}

我的圖像看起來像:

<div class="active item" id="2"><a href="http://epdining.com/eats.php?place=TestRestaurant1"><img src="rimages/2.jpg"></a><div class="carousel-caption"><p>This restaurant is featured blah blah blah blah blah.</p></div></div>

雖然vekozlov的答案可以在Bootstrap 3中對圖像進行居中處理,但當傳送帶縮小時它會中斷:圖像保留其大小,而不是隨著旋轉木馬縮小。

相反,請在頂層輪換展示區div上執行此操作:

<div id="my-carousel" class="carousel slide"
    style="max-width: 900px; margin: 0 auto">
    ...
</div>

這將使整個傳送帶居中並防止其超出圖像寬度(即900像素或任何您想要設置的距離)。 但是,當傳送帶縮小時,圖像隨之縮小。

當然,您應該將此樣式信息放入CSS / LESS文件中。


嘗試這個

    .item img{
      max-height: 300px;
      margin: auto;
    }

解決方法是將該CSS代碼放入您的自定義css文件中

.carousel-inner > .item > img { margin: 0 auto; }





carousel