Bootstrap Project A-Z 08 – Xây dựng slide ảnh

0
504

[ VIDEO TUT ]

Bấm Subscribe Nhận video học mới nhất :

Chú ý: Các bạn lựa chọn video ở chế độ 720HD để xem được chất lượng hình ảnh và âm thanh tốt nhất nhé.

1. Xây dựng slide bằng bootstrap

Ở bài trước tôi đã hướng dẫn các bạn xây dựng được một menu responsive sử dụng bootstrap. Và bây giờ tôi sẽ hướng dẫn các bạn xây đựng một slide ảnh sử dụng bootstrap. Slide này được Bootstrap gọi là Carousel.

Đầu tiên tôi có 4 bức ảnh đặt trong thư mục img và trang slide.html. 1

Bắt tay vào thực hiện. Đầu tiên ta thêm đoạn code như sau

Carousel yêu cầu sử dụng một id (trong trường hợp này id là myCarousel) để có thể hoạt động. Đến đây slide của bạn đã có thể tự hoạt động được.

Lưu ý: nếu ta để chuột vào phần ảnh thì slide sẽ không tự chạy nữa

Giờ ta sẽ thêm nút bấm vào phần nút tròn.

Lưu ý: Có bao nhiêu ảnh thì sẽ có từng đấy cặp thẻ <li>, và phần data-slide-to luôn bắt đầu từ 0.

Giờ tới phần nút Next và Prev

Lưu ý: các class glyphicon chỉ hoạt động khi có font glyphicon. Các font này ở trong thư mục font của bootstrap bạn tải về.

Giờ ta sẽ thêm caption cho ảnh.

Lưu ý: Caption phải được đặt trong class carousel-caption

Như vậy trong bài hoc bootstrap hôm nay tôi đã hướng dẫn các bạn xây dựng xong slide ảnh sử dụng Bootstrap. Cảm ơn các bạn đã theo dõi. Trong bài tiếp theo tôi sẽ  giới thiệu cách xây dựng scroll page cho giao diện HTML chúng ta đã xây dựng ở bài trước.

[ SOURCE CODE ]

  • Code mẫu của bài viết này, các bạn vui lòng download ở đây Source code

Bài học liên quan:

Tác giả: Đạt Nguyễn Vietpro

 

 

[Total: 2    Average: 5/5]

LEAVE A REPLY

Please enter your comment!
Please enter your name here