Slick js và Slick js rails
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 " ...
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 |
| ... | ... | ... | ... |
Để 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"
a. Thêm gem "slick_rails" vào Gemfile
gem "slick_rails"
Gọi bundle install để thực hiện install gem "slick_rails" đã được thêm vào Gemfile
bundle install
b. Trong application.js thêm javascript của slick
//= require slick
c. Trong application.css thêm css của slick
*= require slick *= require slick-theme
Chúc các bạn thành công
a. Tham khảo:
Slick js: https://github.com/kenwheeler/slick Slick rails: https://github.com/guyisra/slickjs_rails
b. Demo:
Slick js:https://github.com/LeTanThanh/slick_js Slick rails: https://github.com/LeTanThanh/slick_js_rails
