Rhinoslider - jQuery slider/slideshow với nhiều hiệu ứng

Đăng bởi Neo trong mục Hướng dẫn vào 03 tháng 4, 2012 | Comments

Rhinoslider - một plugin mới của jQuery hỗ trợ slideshow với nhiều hiệu ứng. Với mỗi hiệu ứng bạn có thể chọn được cá hướng di chuyển, thời gian, cách thức di chuyển (easing) khác nhau.

Cách sử dụng:

Bước 1: Tải Rhinoslider

Bạn có thể tạo một bản Rhinoslider với những gì bạn cần dùng qua công cụ generator

Bước 2: Thêm plugin vào website

Trước hết, bạn cần thêm rhinoslider.css vào website bằng cách thêm đoạn mã dưới đây vào phần <head></head>

<link type="text/css" rel="stylesheet" href="/css/rhinoslider.css">

Tiếp theo bạn cần thêm thư viện jQuery (bản thấp nhất mà rhinoslider hỗ trợ là 1.4.2) và rhinoslider.js.

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/rhinoslider.js"></script>

Bước 3: Gọi rhinoslider lên làm việc

Bạn có thể gọi Rhinoslider bằng cách thêm đoạn mã sau vào website:

<script type="text/javascript">
  	$('#your-id').rhinoslider({
  		options: value  	
  	});  
</script>

tất nhiên là bạn cũng có thể sử dụng công cụ generator. Và còn rất nhiều hàm mà bạn có thể tham khảo.

Tạo style riêng

Nếu bạn không thích style có sẵn của Rhinoslider (hoặc nó không giống với bản thiết kế) bạn có thể tự tạo style riêng ở đây.

Bạn có thích bài viết này?

Neo's picture

Neo

Nhìn mặt trời từ năm 1984 nhưng tới tận 2002 mới được thấy cái máy tính đầu tiên của mình. Đầu năm 2007 thì quyết định theo cái nghề cao quý là thiết kế web Big Grin. Hiện mình đang sống tại Hà Nội. Sở thích: làm website và giúp đỡ mọi người phát triển website theo chiều hướng tốt đẹp hơn.

Trang chủ - Twitter