Bài 11 – Tạo carousel bằng bootstrap

Quay trở lại với seri bootstrap, hôm nay tôi sẽ giới thiệu với các bạn cách tạo carousel bằng bootstrap. Vậy carousel là gì?
Carousel là 1 plugin trong bootstrap nói riêng và jquery nói chung dùng để duyệt các phần tử (hình ảnh, trình chiếu, …) tuần tự xoay vòng, giống như như 1 trình chiếushow (trình chiếu). Để làm carousel, bạn có thể nhúng tập tin “carousel.js” độc lập hoặc nhúng “bootstrap.js” hay “bootstrap.min.js” có sẵn trong Bootstrap.
giờ đây, ta cùng sẵn sàng đi tìm hiểu cách tạo carousel dễ làm với bootstrap nhé.

1. Tạo carousel dễ làm

Đầu tiên, ta tạo 1 đoạn HTML như thế này:

<div id="main">   <div class="container">     <h1>Carousel with bootstrap</h1>     <div id="carousel-simple" class="carousel trình chiếu col-md-6 col-md-offset-3" data-ride="carousel">       <!-- Indicators -->       <ol class="carousel-indicators">         <li data-target="#carousel-simple" data-trình chiếu-to="0" class="active"></li>         <li data-target="#carousel-simple" data-trình chiếu-to="1"></li>         <li data-target="#carousel-simple" data-trình chiếu-to="2"></li>         <li data-target="#carousel-simple" data-trình chiếu-to="3"></li>       </ol>        <!-- Wrapper for trình chiếus -->       <div class="carousel-inner" role="listbox">         <div class="item active">           <img src="media/products/2.png" alt="">         </div>         <div class="item">           <img src="media/products/3.png" alt="">         </div>         <div class="item">           <img src="media/products/17.png" alt="">         </div>         <div class="item">           <img src="media/products/24.png" alt="">         </div>       </div>        <!-- Controls -->       <a class="left carousel-control" href="#carousel-simple" role="button" data-trình chiếu="prev">         <i class="fa fa-chevron-left" aria-hidden="true"></i>       </a>       <a class="right carousel-control" href="#carousel-simple" role="button" data-trình chiếu="next">         <i class="fa fa-chevron-right" aria-hidden="true"></i>       </a>     </div>   </div> </div> 

Thử chạy đoạn HTML bên trên, ta sẽ có kết quả hiển thị như thế này:

giờ đây tôi sẽ đi giải thích cụ thể các thành phần của carousel dựa trên đoạn HTML như sau.

Phần tử div ngoài cùng <div id="carousel-simple" class="carousel trình chiếu col-md-6 col-md-offset-3" data-ride="carousel"> có: ** id="carousel-simple"** dùng để được hiểu 1 carousel. Các button điều khiển (next, prev) hay Indicators sẽ thông qua id này để giúp đỡ ta có thể thao tác xem trình chiếu tiếp nữa hoặc trình chiếu trước đó. Nếu không tin, bạn có thể xóa id này trong phần control hoặc Indicators là biết liền. Sẽ không thể thao tác lên các phần này để xem phần trình chiếu mới hoặc trở lại xem trình chiếu cũ ngay lập tức. Muốn xem trình chiếu tiếp nữa phải đợi auto next còn xem ảnh cũ hả, cứ đợi nó chạy hết 1 vòng nhé. class .carousel để mô tả thẻ div này chứa 1 carousel. Bạn có thể dùng class này trong script để đổi khác các option cho carousel. Các option của carousel là gì thì tôi sẽ nói ở phần sau. class .trình chiếu để thêm các hiệu ứng động và chuyển tiếp, làm cho 1 đối tượng sẽ có hiệu ứng trượt khi hiển thị mới, nếu bạn không thích có hiệu ứng này thì bỏ qua không được hiểu. Thuộc tính data-ride=”carousel” nhằm kích hoạt hiệu ứng hoạt hình sẽ lập tức làm việc khi trang được tải. Phần “Indicators”: Là các chấm tròn màu xanh ở dưới trình chiếu như ảnh demo bên trên. Phần này cho ta biết số phần tử trình chiếu hiện có và trình chiếu nào đang được hiển thị trong carousel này. Phần này có 2 thuộc tính cơ bản: Thuộc tính data-target để chỉ đến id của carousel. Như trên tôi đã giải thích. Thông qua id của carousel, ta có thể thao tác lên các phần tử trình chiếu. Chẳng hạn bạn muốn xem trình chiếu tiếp hoặc trình chiếu trước đó, bạn cũng có thể click vào các chấm tròn này thay vì click vào các button control. Thuộc tính data-trình chiếu-to dùng để truyền chỉ số của một trình chiếu. Nó có tác dụng chuyển vị trí trình chiếu tới một vị trí có chỉ số cụ thể tính từ 0. Phần “Wrapper for trình chiếus” được được hiểu bên trong thẻ div với class .carousel-inner. content của mỗi trình chiếu sẽ được được hiểu trong class .item, content này có thể là hình ảnh hoặc văn bản. Class .active để mô tả trình chiếu nào đang được hiển thị. Phần “Left and right controls” là các nút cấp quyền người sử dụng xem hình ảnh trước sau khi nhấn chuột lên các nút này. Thuộc tính data-trình chiếu cấp quyền dùng keyword “prev” hay “next”, để được hiểu vị trí tiếp nữa của 1 trình chiếu dựa vào vị trí của trình chiếu hiện tại.

2. Thêm caption cho carousel

Để thêm caption vào các trình chiếu trong 1 carousel, dễ làm là thêm phần tử div class=”carousel-caption” bên trong mỗi phần tử div class=”item” để tạo chú thích cho mỗi trình chiếu. Bạn hãy chèn bất kỳ mã HTML nào vào trong caption đó và nó sẽ được format và căn chỉnh một cách tự động.

<div class="item">   <img src="media/products/3.png" alt="">   <div class="carousel-caption">     <h3>There are 3 red tomatoes</h3>     <p>They are so fresh</p>   </div> </div> 

Kết quả thu được là:

3. Hiển thị nhiều item trong 1 trình chiếu

Trong phần trên, ta vừa đi tìm hiểu cách tạo 1 carousel dễ làm: 1 trình chiếu hiển thị 1 item. Vậy trong tình thế muốn nhiều item thì ta làm sao? Hãy theo dõi đoạn HTML sau đây

<div id="main">   <div class="container">     <h1>Carousel with bootstrap</h1>     <div id="carousel-simple" class="carousel multi-item-carousel trình chiếu col-md-6 col-md-offset-3" data-ride="carousel">        <!-- Wrapper for trình chiếus -->       <div class="carousel-inner" role="listbox">         <div class="item active">           <div class="col-md-4">             <img src="media/products/2.png" alt="">           </div>         </div>         <div class="item">           <div class="col-md-4">             <img src="media/products/3.png" alt="">           </div>         </div>         <div class="item">           <div class="col-md-4">             <img src="media/products/17.png" alt="">           </div>         </div>         <div class="item">           <div class="col-md-4">             <img src="media/products/24.png" alt="">           </div>         </div>         <div class="item ">           <div class="col-md-4">             <img src="media/products/12.png" alt="">           </div>         </div>         <div class="item">           <div class="col-md-4">             <img src="media/products/13.png" alt="">           </div>         </div>         <div class="item">           <div class="col-md-4">             <img src="media/products/21.png" alt="">           </div>         </div>         <div class="item">           <div class="col-md-4">             <img src="media/products/22.png" alt="">           </div>         </div>         <div class="item ">           <div class="col-md-4">             <img src="media/products/23.png" alt="">           </div>         </div>         <div class="item">           <div class="col-md-4">             <img src="media/products/9.png" alt="">           </div>         </div>         <div class="item">           <div class="col-md-4">             <img src="media/products/10.png" alt="">           </div>         </div>         <div class="item">           <div class="col-md-4">             <img src="media/products/11.png" alt="">           </div>         </div>       </div>        <!-- Controls -->       <a class="left carousel-control" href="#carousel-simple" role="button" data-trình chiếu="prev">         <i class="fa fa-chevron-left" aria-hidden="true"></i>       </a>       <a class="right carousel-control" href="#carousel-simple" role="button" data-trình chiếu="next">         <i class="fa fa-chevron-right" aria-hidden="true"></i>       </a>     </div>   </div> </div> 

Bởi vì đây là tình thế custom lại plugin dựa trên bootstrap nên đảm bảo phải có thêm 1 đoạn custom javascript cho phần này

<script type="text/javascript">   $('.multi-item-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));     }   }); </script> 

song song với đó là thêm 1 đoạn custom css

.multi-item-carousel{   .carousel-inner{     > .item{       transition: 500ms ease-in-out left;     }     .active{       &.left{         left:-33%;       }       &.right{         left:33%;       }     }     .next{       left: 33%;     }     .prev{       left: -33%;     }     @media all and (transform-3d), (-webkit-transform-3d) {       > .item{         // use your favourite prefixer here         transition: 500ms ease-in-out left;         transition: 500ms ease-in-out all;         backface-visibility: visible;         transform: none!important;       }     }   } } 

sau cùng, ta có được kết quả như sau:

4. Kết luận

Như vậy, hôm nay các bạn đã tìm hiểu thêm được 1 plugin rất hay của bootstrap. Thêm vào đó, tôi muốn nói rằng, hoàn thành bài này cũng là hoàn thành seri bootstrap tại đây. Tôi không chắc sau này có thêm bài viết nữa về bootstrap hay không. Nếu như có thêm cái gì đó hay hay về bootstrap, tôi vẫn sẽ viết thêm về nó. topic của bài sau là gì thì vẫn là 1 bí mật. Chúc các bạn thành công!

Nguồn viblo.asia