Cách sử dụng jQuery Carousel
Trang 1 trong tổng số 1 trang • Share
Cách sử dụng jQuery Carousel
joomla k2 carousel xin giới thiệu cách sử dụng jQuery Carousle. 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.
[/html]
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>
[/html]
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>
[/html]
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>
[/html]
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>
[/html]
Class .data-slide nhận 2 từ “prev” hoặc “next” để thay đổi vị trí trượt hiện tại của nó.
[html]
https://gist.githubusercontent.com/barryvdh/6155151/raw/cd4b31a559dee5d67e91cdd3eea60ec7e9ad3c79/carousel.js.
[/html]
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>
[/html]
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>
[/html]
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>
[/html]
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>
[/html]
Class .data-slide nhận 2 từ “prev” hoặc “next” để thay đổi vị trí trượt hiện tại của nó.
_________________
joomla article slider, joomla minify html, joomla mobile template
vanthai- Cấp 1
- Bài gửi : 20
Điểm : 3639
Like : 0
Tham gia : 03/01/2015
Re: Cách sử dụng jQuery Carousel
Trước đây để tạo 1 slider như thế này phải viết code js rất mệt, giờ có thư viện sẵn thế này rồi tiện thật, mà lại cho các coder vào 1 khuôn khổ. rất hay!
_________________
joomla module manager, responsive joomla templates, joomla article masonry
Similar topics
» Cách sử dụng jQuery Imagelens
» Cách Tạo Một Plugin Đơn Giản Trong jQuery
» Hướng dẫn sử dụng lazy load của jquery
» Hướng Dẫn Cách Lấy Note Trong XML Theo Giá Trị Thuộc Tính Bằng jQuery
» Sư tử kỳ lân nghê phong thủy công dụng và cách dùng cách phân biệt
» Cách Tạo Một Plugin Đơn Giản Trong jQuery
» Hướng dẫn sử dụng lazy load của jquery
» Hướng Dẫn Cách Lấy Note Trong XML Theo Giá Trị Thuộc Tính Bằng jQuery
» Sư tử kỳ lân nghê phong thủy công dụng và cách dùng cách phân biệt
Trang 1 trong tổng số 1 trang
Permissions in this forum:
Bạn không có quyền trả lời bài viết