Slick js và Slick js rails

Bài đăng này đã không được cập nhật trong 2 năm

1. Slick js

Slick js là thư viện javascript cho phép bạn các slider một cách nhanh chóng và hiệu quả và dễ dàng. Để sử dụng slick js cho project của mình, bạn thực hiện các bước như sau:

a. Thêm các thư việc css của slick js vào project

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.0/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.0/slick/slick-theme.css"/>
Thêm các thư viện javascript của slick vào project
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.0/slick/slick.min.js"></script>

b. Tạo html cho các DOM object mà bạn muốn tạo slider

  <h1 class="title">Single Item</h1>
  <div class="slider" id="single_item">
    <div><h1>01</h1></div>
    <div><h1>02</h1></div>
    <div><h1>03</h1></div>
    <div><h1>04</h1></div>
    <div><h1>05</h1></div>
  </div

c. Gọi slick function cho DOM object mà bạn muốn tạo slider

$("#single_item").slick({
  dots: true
});

Để tạo slider cho DOM object, ta gọi slick function trên DOM object và truyền các slick option vào. Các slick option cơ bản:

Option	Type	Default	Description
adaptiveHeight	boolean	false	Thay đổi chiều cao của slider theo chiều cao của slider hiện tại
arrows	boolean	true	Hiển thị mũi tên Next/Prev
autoplay	boolean	false	Cho phép slider chạy tự động
autoplaySpeed	int	3000	Khoảng cách thời gian giữa 2 lần autoplay của slider
centerMode	boolean	false	Làm slide ở giữa slider được hiển thị nổi bật hơn sơ với các slider xung quang. Dùng chung với slidesToShow giá trị lẻ
centerPadding	string	'50px'	Padding của slide ỡ giữa slider khi centerMode là true
dots	boolean	false	Hiển thị các dấu chấm tương ứng với các slide của slider
dotsClass	string	'slick-dots'	Css class cho các dấu chấm tương ứng với các slide của slider
fade	boolean	false	Thực hiện hiệu ứng fade cho từng slide của slider
infinite	boolean	true	Thực hiện vòng lặp vô hạn cho slider
initialSlide	integer	0	Slide đầu tiên được hiểm thị của slider
lazyLoad	string	'ondemand'	'ondemand': thực hiện load image khi thực hiện slide đến image đó, 'progressive' thực hiện load image khi thực hiện slide đến image trước đó
nextArrow	string hoặc DOM object	<button type="button" class="slick-next">Next</button>	Chỉ định HTML hoặc DOM object cho "Next" mũi tên
pauseOnDotsHover	boolean	false	Dừng autoplay cho slider khi hover qua một dot
pauseOnFocus	boolean	true	Dừng autoplay cho slider khi một slide được focus
pauseOnHover	boolean	true	Dừng autoplay cho slider khi một slide được hover
prevArrow	string hoặc DOM object	<button type="button" class="slick-prev">Previous</button>	Chỉ định HTML hoặc DOM object cho "Next" mũi tên
slidesToScroll	int	1	Số slide được scroll khi thực hiện Next/Prev
slidesToShow	int	1	Số slide được hiển thị trên slider
speed	int	300	Tốc độ mỗi lần thực hiện transition Next/Prev
...	...	...	...

2. Slick js rails

Để thêm thư việc slick js vào rails project, bạn có thể sử dụng gem "slick_rails" hoặc gem "jquery-slick-rails" Trong bài này sẽ thực hiện với gem "slick_rails"