Cách sử dụng jQuery Carousel

Carousel là một plugin của jQuery giúp chuyển đổi bất kỳ phần tử HTML nào thành dạng lặp quay vòng. Plugin này được tích hợp sẵn trong boostrap.js hoặc là một file .js riêng lẻ bạn có thể download tại:

HTML:

https://gist.githubusercontent.com/barryvdh/6155151/raw/cd4b31a559dee5d67e91cdd3eea60ec7e9ad3c79/carousel.js.

Nhưng tốt nhất bạn nên dùng file bootstrap.js vì nó nhiều tính năng hơn, và nó có sẵn cả CSS rồi, ta không cần viết thêm nữa.

Chú ý: Carousel không được hỗ trợ từ IE 9 trở xuống( bởi vì nó sử dụng hiệu ứng transition và animations của CSS3 trong slide).

Bắt đầu tạo 1 site dùng Carousel.

Bước 1: thêm file carousel.js và file bootstrap.min.css vào site:

HTML:

<script src="js/bootstrap.min.js" type="text/javascript"> </script>
<style type="text/css>
@import url("bootstrap/css/bootstrap.min.css");
</style>

Bước 2: ta có một mã HTML như sau:

HTML:

<div id="wrapper_carousel" class="
	
carousel slide" data-ride="
	
carousel">

<div class="carousel-inner" role="listbox">

<div class="item active">

<img src="image/1.jpg" alt="Chania">

</div>

...............................................

<div class="item">

<img src="image/4.jpg" alt="Flower">

</div>

</div>

</div>

Là ta đã có 1 trang web có slide chạy theo kiểu carousel rồi đó.

Giải thích cấu trúc ở trên:

Carousel yêu cầu phải có 1 id( ở đây là id=”wrapper_carousel”) để điều khiển các hàm thuộc tính, tên id là gì thì tùy bạn.

class=”carousel slide” là một quy định của thẻ div có chứa carosel, nó làm cho slide có hiệu ứng trượt ảnh mượt mà.

Thuộc tính data-ride=”carousel” báo với Bootstrap bắt đầu hiệu ứng chuyển động của carousel ngay khi trang web được load. Nếu không có thuộc tính này, carousel sẽ không có hiệu ứng chuyển động.

Slide quy định trong một thẻ div với class .caroudel-inner.

Mỗi thành phần của slide được nằm trong thẻ div với class là .item, có thể là text hoặc ảnh.

Class .active để quy định thành phần nào là bắt đầu của slide, class này là cần thiết.

Chỉ với mã HTML ở trên, thì carousel nó tự chạy, ta chưa điều khiển được nó nên chưa pro lắm. Bây giờ ta sẽ thêm cho nó 2 phần điều khiển là: chỉ số để chọn, 2 nút next và pre.

Để thêm nút chỉ số, ta thêm đoạn mã sau dưới dòng div id=”wrapper_carousel”

HTML:

<ol class="carousel-indicators">

<li data-target="#wrapper_carousel" data-slide-to="0" class="active"></li>

<li data-target="#wrapper_carousel" data-slide-to="1"></li>

<li data-target="#wrapper_carousel" data-slide-to="2"></li>

<li data-target="#wrapper_carousel" data-slide-to="3"></li>

</ol>

Nút chỉ số là các chấm nhỏ ở dưới cùng mỗi slide để cho ta biết có bao nhiêu slide trong carousel( mỗi slide là một dấu chấm) và slide hiện tại đang xem nằm ở vị trí nào. Chỉ số là một danh sách sắp xếp với class .carousel-indicators

Class .data-target trỏ đến id của Carousel

Class .data-slide-to quy định khi click vào nút này thì slide nào sẽ chạy đến.

Bây giờ ta thêm nút next và pre bằng đoạn HTML sau:

HTML:

<a class="left carousel-control" href="#wrapper_carousel" 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="#wrapper_carousel" role="button" data-slide="next">

<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

<span class="sr-only">Next</span>

</a>

Class .data-slide nhận 2 từ “prev” hoặc “next” để thay đổi vị trí trượt hiện tại của nó.