Tùy biến carousel bootstrap (P.1)

Bootstrap đã xây dựng sẵn cho chúng ta một thư viện carousel. Tuy nhiên, bootstrap chỉ xây dựng cho chúng ta một hiệu ứng chuyển ảnh và chỉ có duy nhất một ảnh trong item.
Trong bài viết này, tôi sẽ hướng dẫn các bạn cách tùy biến carousel bootstrap với hiệu ứng fade và nhiều ảnh trong một item.

HIỆU ỨNG FADE TRONG CAROUSEL BOOTSTRAP

Chuẩn bị

html

<div class="col-md-6 col-md-offset-3">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="http://placehold.it/500/e499e4/fff&amp;text=1">
      <div class="carousel-caption">
        caption 1
      </div>
    </div>
    <div class="item">
      <img src="http://placehold.it/500/e499e4/fff&amp;text=2">
      <div class="carousel-caption">
        caption 2
      </div>
    </div>

    <div class="item">
      <img src="http://placehold.it/500/e499e4/fff&amp;text=3">
      <div class="carousel-caption">
        caption 3
      </div>
    </div>

    <div class="item">
      <img src="http://placehold.it/500/e499e4/fff&amp;text=4">
      <div class="carousel-caption">
        caption 4
      </div>
    </div>  
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>
</div>

Đoạn code trên là đoạn ví dụ về cách sử dụng carousel của bootstrap. Bạn có thể xem tại bootstrap.

Xem demo

Tiếp theo, chúng ta sẽ thêm hiệu ứng fade cho nó bằng css3 như sau:

 css

    .carousel-inner img{

        width:100%;

    }

    .carousel-inner .item{

        transition:opacity 0.4s ease-in-out ;

        -webkit-transition:opacity 0.4s ease-in-out;

        -ms-transition:opacity 0.4s ease-in-out;

    }

    .carousel-inner .active.left,.carousel-inner .active.right{

        left:0;

        opacity:0.3;

    } 
.carousel-inner .next,.carousel-inner .prev {
     opacity:0.5;
}

Xem demo

Trong đoạn code css trên, tôi  đã xử lý hiệu ứng fade cho carousel bằng cách làm mờ bức ảnh đang được active với opacity bằng 0.3. Và bức ảnh tiếp theo sẽ được làm mờ với opacity bằng 0.5. Sau đó, tôi đã sử dụng thuộc tính transition : 0.4s để cho hiệu ứng làm mờ bức ảnh khi chuyển đổi giữa các item là 0.4s. Bạn có thể thay đổi các tham số opacity và transition để hiệu ứng trông bắt mắt hơn theo ý thích của bạn.

Trong phần sau, tôi sẽ hướng dẫn các bạn cách sử dụng carosel bootstrap với nhiều hình ảnh trong một item.