Bài 36: Cách sử dụng Image Gallery Bar trong css

Cách sử dụng Image Gallery Bar trong css

Image Gallery Bar (thanh trượt hình ảnh) trong CSS được tạo ra bằng cách sử dụng thuộc tính "overflow-x: scroll" để tạo ra thanh trượt ngang và sử dụng các hình ảnh làm các phần tử con của container. Dưới đây là một ví dụ cơ bản:

HTML:

<div class="image-gallery">
  <img src="image1.jpg">
  <img src="image2.jpg">
  <img src="image3.jpg">
  <img src="image4.jpg">
  <img src="image5.jpg">
</div>

CSS:

.image-gallery {
  overflow-x: scroll;
  white-space: nowrap;
}

.image-gallery img {
  display: inline-block;
  width: 150px;
  height: 150px;
  margin-right: 10px;
}

Trong đó, thuộc tính "overflow-x: scroll" được thêm vào container để tạo ra thanh trượt ngang. Thuộc tính "white-space: nowrap" được thêm vào container để ngăn các hình ảnh xuống dòng mới. Các hình ảnh được đặt trong các phần tử img và có thuộc tính "display: inline-block" để chúng được hiển thị cùng một dòng và có kích thước đồng nhất. Thuộc tính "margin-right: 10px" được thêm vào hình ảnh để tạo ra khoảng cách giữa các hình ảnh.

Bạn có thể tùy chỉnh các thuộc tính này để tạo ra hiệu ứng thanh trượt phù hợp với nhu cầu của mình.