Bootstrap - Tạo slide ảnh

Chania

The atmosphere in Chania has a touch of Florence and Venice.

Chania

The atmosphere in Chania has a touch of Florence and Venice.

Flowers

Beatiful flowers in Kolymbari, Crete.

Flowers

Beatiful flowers in Kolymbari, Crete.

Previous Next

Bootstrap cung cấp một số class để tạo slide ảnh.
Ví dụ :

  








  




      



Chania
The atmosphere in Chania has a touch of Florence and Venice.



      



Chania
The atmosphere in Chania has a touch of Florence and Venice.



      



Flowers
Beatiful flowers in Kolymbari, Crete.



      



Flowers
Beatiful flowers in Kolymbari, Crete.



  
    
    Previous
  
  
    
    Next
  

Trong đó :

• Để tạo 1 slide ảnh, bạn cần một id (trong ví dụ này id = "myCarousel")
• class = "slide carousel" chỉ rằng đây là <div> chứa các ảnh
• Thuộc tính data-ride="carousel" để tạo hiệu ứng chuyển động vòng của ảnh
• Class .carousel-indicators quy định số ảnh có trong slide
• Thuộc tính data-target xác định nơi hiển thị hình ảnh
• Thuộc tính .data-slide-to xác định chỉ số hiển thị theo thứ tự
• Class .carousel-inner quy định các slide trong <div>
• Class .item định nghĩa nội dung của slide trong <div>, có thể là văn bản hoặc hình ảnh
• Class .active phải được thêm vào để có thể chạy được slide
• Hai bên slide có 2 nút prev/next giúp di chuyển qua lại giữa trong ảnh trong slide
• Class .left, .right, .carousel-control giúp hiển thị các nút bên trái, bên phải
• Thuộc tính data-slide (data-slide="prev" / data-slide="next") để di chuyển bằng tay khi click vào
• Để thêm chú thích cho mỗi ảnh, cần thêm <div class = "carousel-caption"> trong mỗi <div class = "item">

Như vậy, thật đơn giản để tạo một slide ảnh với sự hỗ trợ của bootstrap.