Tự học Bootstrap - Cơ bản - bài 27 – Bộ ảnh trượt

Plugin ảnh trượt Carousel Plugin

Plugin Carousel là 01 công cụ dùng để tạo bộ ảnh trượt (slideshow).

Mẹp: Plugins có thể tích hợp riêng biệt (sử dụng file của Bootstrap "carousel.js"), hoặc tất cả trong 01 file "bootstrap.js" hoặc "bootstrap.min.js").

---

Ví dụ:

Ghi chú: Plugin Carousels không hỗ trợ chính xác trên Internet Explorer 9 và các phiên bản cũ hơn (bởi vì chúng hoạt động nhờ hiệu ứng CSS3 transitions và các hiệu ứng động để tạo ra hiệu ứng trượt).

---

Cách tạo 01 bộ ảnh trượt

Ví dụ sau cho thấy cách tạo 01 bộ ảnh trượt cơ bản:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Chỉ mục (các chấm nhỏ) -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="img_chania.jpg" alt="Chania">
    </div>

    <div class="item">
      <img src="img_chania2.jpg" alt="Chania">
    </div>

    <div class="item">
      <img src="img_flower.jpg" alt="Flower">
    </div>

    <div class="item">
      <img src="img_flower2.jpg" alt="Flower">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Giải thích ví dụ:

Thẻ <div> ngoài cùng:
Bộ ảnh trượt Carousels đòi hỏi phải có 01 id (trong trường hợp này id="myCarousel" ) để cho các điều khiển chạy đúng tính năng.
Lớp class="carousel" xác định rằng thẻ <div> này chứa 01 bộ ảnh trượt.
Lớp .slide thêm hiệu ứng trượt và chuyển động CSS, nhằm làm cho ảnh trượt đi khi chuyển ảnh mới. Bỏ qua lớp này nếu bạn không muốn hiệu ứng trượt này.
Thuộc tính data-ride="carousel" cho biết Bootstrap sẽ bắt đầu hiệu ứng bộ ảnh trượt ngay lập tức khi trang web được tải.
Phần "Chỉ mục":
Là các chấm nhỏ ở cạnh dưới mỗi ảnh (có bao nhiêu chấm là có bấy nhiêu ảnh trong bộ ảnh, và cho biết người dùng hiện đang xem ảnh nào).
Chỉ mục được xác định bằng 01 danh sách có thứ tự với tên lớp là .carousel-indicators
Thuộc tính data-target trỏ đến id của bộ ảnh.
Thuộc tính data-slide-to xác định ảnh nào sẽ chuyển tới khi bấm vào chấm nhỏ.
Phần "bao các slides ảnh":
Các slides ảnh được định bằng 01 thẻ <div> với lớp .carousel-inner.
Nội dung của mỗi slide được định bằng 01 thẻ <div> với lớp .item. Có thể là văn bản hoặc hình ảnh.
Lớp .active cần được thêm vào 01 trong các slide ảnh. Ngoài ra, bộ ảnh trượt carousel sẽ không bị hiện ra toàn bộ cùng lúc.
Phần "Các nút chuyển trái và phải":
Phần mã này sẽ thêm nút "Chuyển trái" và "Chuyển phải" cho phép người dùng di chuyển tới hoặc lùi giữa các slide ảnh.
Thuộc tính data-slide chấp nhận từ khóa "prev" hoặc "next", cho biết vị trí slide ảnh chuyển tới là lùi hay tiến so với vị trí slide ảnh hiện tại.

---

Thêm phần tiêu đề vào các ảnh trượt

Thêm <div class="carousel-caption"> bên trong mỗi cặp thẻ <div class="item"> để tạo phần tiêu đề cho mỗi slide ảnh.
<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="img_chania.jpg" alt="Chania">
      <div class="carousel-caption">
        <h3>Chania</h3>
        <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
      </div>
    </div>

    <div class="item">
      <img src="img_chania2.jpg" alt="Chania">
      <div class="carousel-caption">
        <h3>Chania</h3>
        <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
      </div>
    </div>

    <div class="item">
      <img src="img_flower.jpg" alt="Flower">
      <div class="carousel-caption">
        <h3>Flowers</h3>
        <p>Beatiful flowers in Kolymbari, Crete.</p>
      </div>
    </div>

    <div class="item">
      <img src="img_flower2.jpg" alt="Flower">
      <div class="carousel-caption">
        <h3>Flowers</h3>
        <p>Beatiful flowers in Kolymbari, Crete.</p>
      </div>
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Lophocvitinh.COM***Tự học Bootstrap - Phần cơ... bởi minh-nguyen48