Tạo slide với bxSlider

Cập nhật lần cuối vào

Có nhiều cách để bạn có thể tạo slider trên website, tùy thuộc vào sở thích của mỗi người mà lựa chọn script cho phù hợp. Bài viết này mình sẽ hướng dẫn cho các bạn cách tạo slide với bxSlider, đây là một plugin jQuery miễn phí, có hỗ trợ nhiều tính năng giúp bạn tạo các hiệu ứng đẹp khi thiết kế trang web.

Tạo slide với bxSlider

Làm gì cũng vậy, việc đầu tiên bạn phải làm đó là xem qua demo để biết cách thức mã nguồn bạn đang định dùng nó hoạt động như thế nào, nếu cảm thấy thích thì mới đọc tiếp để tìm hiểu cách sử dụng.

Demo bxSlider

Bạn vào link demo bên trên, lựa chọn ví dụ mà bạn muốn xem để thấy được sự hoạt động của bxSlider một cách trực quan. bxSlider là plugin miễn phí, hỗ trợ responsive tương thích với nhiều thiết bị di động, bạn có thể tạo slide chạy theo chiều ngang hoặc chiều dọc với các kiểu nội dung khác nhau, bao gồm hình ảnh, video và các nội dung bằng HTML.

bxSlider còn có khả năng tương thích tốt với màn hình cảm ứng, hỗ trợ nhiều tùy chọn cho bạn cấu hình, quan trọng hơn cả là nó hoàn toàn miễn phí. Để cấu hình bxSlider thì bạn làm các bước sau:

1. Load thư viện

Việc quan trọng bạn cần phải làm đối với bất kỳ plugin jQuery nào đó là load thư viện jQuery trước, sau đó load các tập tin cần thiết của plugin bạn đang dùng.

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />

2. Viết mã HTML

Viết mã HTML hiển thị nội dung bạn muốn hiển thị bằng slide, cái này tùy vào nhu cầu và mục đích riêng của từng trang web mà bạn viết cho phù hợp.

<ul class="bxslider">
  <li><img src="/images/pic1.jpg" /></li>
  <li><img src="/images/pic2.jpg" /></li>
  <li><img src="/images/pic3.jpg" /></li>
  <li><img src="/images/pic4.jpg" /></li>
</ul>

3. Chạy hàm thực thi bxSlider

Đây là bước cuối cùng trong khâu sử dụng plugin, hầu như plugin nào bạn cũng phải làm theo 3 bước như thế này, chỉ khác ở chỗ là các đường link và nội dung HTML bạn làm khác, cũng như tên hàm cũng làm khác.

$(document).ready(function(){
  $('.bxslider').bxSlider();
});

Đó là các thao tác cơ bản bạn cần phải làm để có thể tạo được slide bằng bxSlider. Nếu bạn muốn làm slider chạy theo chiều dọc thì cũng có thể áp dụng như code bên dưới mình làm.

// Tạo slide tin nổi bật trong tuần
(function(){
	var bx_slider_list = $('.list-bxslider'),
		min_slides = 5;
	if(bx_slider_list.length) {
		min_slides = bx_slider_list.attr('data-count');
		if(min_slides > 5) {
			bx_slider_list.bxSlider({
				mode: 'vertical',
				infiniteLoop: true,
				pager: false,
				minSlides: 5,
				auto: true,
				controls: false,
				useCSS: false,
				speed: 2000,
				pause: 6000,
				moveSlides: 1
			});
		}
	}
})();

Có rất nhiều tùy chọn bạn có thể dùng, xem thêm các tùy chọn của bxSlider trên trang chủ của họ. Đối với mã nguồn thì bạn có thể dễ dàng thấy được link tải về máy tính trên mạng hoặc trên trang chủ của bxSlider. Chúc bạn thành công.