+3

Slick js và Slick js rails

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/[email protected]/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/kenwheeler/[email protected]/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/[email protected]/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"

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

3. Link tham khảo và demo

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


All Rights Reserved

Viblo
Let's register a Viblo Account to get more interesting posts.