Tạo Một Responsive Gallery Bằng Slick.js

Trong bài hướng dẫn này, chúng ta sẽ sử dụng slick.js, một plugin jQuery nổi tiếng, để xây dựng một responsive gallery hấp dẫn. Đây là gallery mà chúng ta sẽ tạo:

Nhớ xem phiên bản toàn màn hình và thay đổi kích thước cửa sổ trình duyệt của bạn để xem layout của nó thay đổi tùy thuộc vào viewport như thế nào nhé.

Slick.js là gì?

Slick.js là một plugin jQuery nổi tiếng được tạo ra bởi Ken Wheeler cho phép bạn tạo ra những responsive carousel tuyệt đẹp. Để hiểu rõ hơn về những gì plugin này có thể mang lại cho bạn, hãy đọc tài liệu hướng dẫn.

Thật vui khi nó hoạt động không chỉ trong tất cả các trình duyệt hiện đại mà nó còn hoạt động trong một số trình duyệt cũ hơn như IE 8+.

Sau cùng, có thể bạn muốn thấy một phiên bản WordPress.

Làm Quen Với Slick.js

Để bắt đầu với slick, trước tiên tải về và cài đặt các tập tin sau đây vào trong dự án của bạn:

• jQuery (≥1.7)
• slick.css hoặc phiên bản rút gọn của nó
  
• slick.js hoặc phiên bản rút gọn của nó

Ngoài ra, bạn có thể cần import tập tin slick-theme.css

Bạn có thể lấy về các tập tin tương ứng của slick bằng cách truy cập repo Github của nó, bằng cách sử dụng một package manager (ví dụ npm) hoặc bằng cách load các tập tin cần thiết thông qua một CDN (ví dụ như cdnjs). Đối với bài hướng dẫn này, tôi sẽ chọn cách cuối cùng.

Ngoài ra, tôi còn kết hợp Babel để biên dịch ES6 xuống ES5 và Lodash để tận dụng hàm debounce của nó (chúng ta sẽ dùng nó sau này).

Như vậy, nếu bạn nhìn vào tab Settings của pen demo, bạn sẽ thấy rằng tôi đã thêm một tập tin CSS và ba tập tin JavaScript từ bên ngoài.

1. Phần HTML

Điều quan trọng lúc này là hiểu được cấu trúc trang web của chúng ta. Quan trọng nhất, chúng ta sẽ định nghĩa hai carousel cùng có những tấm ảnh giống và đồng bộ với nhau (chúng ta sẽ đề cập cách làm sau). Kích thước hình ảnh là 860 x 550 px, dù vậy, ở trong dự án của bạn có thể khác.

Cuối cùng, như một phần của carousel thứ hai chúng ta sẽ chỉ định mũi tên điều hướng cũng như một phần tử lưu dấu tổng số slide.

Dưới đây là cấu trúc cần thiết cho trang demo của chúng ta:

<div class="loading">Carousel is loading...</div>
<div class="container">
  <div class="synch-carousels">
  
    <div class="left child">
      <div class="gallery">
        <div class="item">
          <img src="IMG_SRC" alt="">
        </div>
        <!-- 4 more images here -->
      </div>
    </div><!--/left-->
    
    <div class="right child">
      <div class="gallery2">
        <div class="item">
          <img src="IMG_SRC" alt="">
        </div>
        <!-- 4 more images here -->
      </div>
      <div class="nav-arrows">
        <button class="arrow-left">
          <!--svg here-->
        </button>
        <button class="arrow-right">
          <!--svg here-->
        </button>
      </div>
      <div class="photos-counter">
        <span></span><span></span>
      </div>
    </div><!--/right-->
    
  </div>
</div>

2. Phần CSS

Tổng cộng, gallery của chúng ta có bốn giao diện khác nhau tùy thuộc vào viewport. Hãy hình dung chúng bằng hướng tiếp cận mobile-first.

Khi kích thước trình duyệt nhỏ hơn 480px, nó sẽ trông như thế này, với chỉ có carousel thứ hai và điều hướng xuất hiện:

Sau đó, trên những màn hình giữa 480px và 768px, nó sẽ như sau, với hai hình thu nhỏ bên dưới mỗi slide chính.

Tiếp theo, trên màn hình từ 769px đến 1023px, chúng ta sẽ đưa ra thêm một hình thu nhỏ thứ ba:

Cuối cùng, trên những màn hình lớn (≥1024px), nó sẽ như sau, với những hình thu nhỏ xuất hiện trên slide (lưu ý rằng chúng không mấy vừa vặn với toàn bộ tấm hình này):

Tất cả những trường hợp ở trên phục vụ cho media query ở bên dưới:

.synch-carousels {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.synch-carousels > * {
  width: 100%;
}

.synch-carousels .right {
  order: -1;
}

.synch-carousels .left {
  overflow: hidden;
}

.synch-carousels .gallery {
  display: none;
}

.synch-carousels .gallery .slick-list {
  height: auto !important;
  margin: 0 -20px;
}

.synch-carousels .gallery .slick-slide {
  margin: 0 20px;
}

@media screen and (min-width: 480px) {
  .synch-carousels .right {
    margin-bottom: 20px;
  }

  .synch-carousels .gallery {
    display: block;
  }
}

@media screen and (min-width: 1024px) {
  .synch-carousels .right {
    position: relative;
    width: calc(100% - 230px);
    margin-bottom: 0;
    order: 2;
  }

  .synch-carousels .left {
    width: 210px;
  }

  .synch-carousels .gallery .slick-slide {
    margin: 0 0 20px 0;
  }

  .synch-carousels .gallery .slick-list {
    margin: 0;
  }
}

Lưu ý, có một rule !important. Điều này sẽ ghi đè một inline style của slick.

3. Phần JavaScript

Bây giờ hãy chuyển hướng sang những thứ liên quan đến JavaScript.

Cache Bộ Chọn

Khi DOM đã sẵn sàng, một cách làm tốt là chúng ta cache một số bộ chọn mà chúng ta thường dùng.

const $left = $(".left");
const $gl = $(".gallery");
const $gl2 = $(".gallery2");
const $photosCounterFirstSpan = $(".photos-counter span:nth-child(1)");

Khởi tạo Carousel

Sau đó, chúng ta khởi tạo và đồng bộ hai carousel. Phần code chịu trách nhiệm cho hành vi này như sau:

$gl.slick({
  rows: 0,
  slidesToShow: 2,
  arrows: false,
  draggable: false,
  useTransform: false,
  mobileFirst: true,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        slidesToShow: 3
      }
    },
    {
      breakpoint: 1023,
      settings: {
        slidesToShow: 1,
        vertical: true
      }
    }
  ]
});

$gl2.slick({
  rows: 0,
  useTransform: false,
  prevArrow: ".arrow-left",
  nextArrow: ".arrow-right",
  fade: true,
  asNavFor: $gl
});

Không nghi ngờ gì, cách tốt nhất để hiểu được code này hoạt động như thế nào là đọc phần hướng dẫn của slick. Tuy nhiên, hãy để tôi giải thích hai thứ quan trọng ở đây:

• Cấu hình asNavFor cho phép chúng ta đồng bộ các carousel và sử dụng một cái như là điều hướng cho cái khác.
• Mặc định, slick sử dụng CSS Transform. Tuy nhiên trong trường hợp của chúng ta, chúng ta tắt chúng đi bằng useTransform: false. Điều này là bởi vì chúng gây nên một tình trạng giật nhẹ ở trong slide đầu tiên của carousel thứ nhất trên màn hình lớn (chúng ta có thể tắt nó chỉ trong carousel đầu tiên).

Hiện thị và Tùy biến Giao diện của Gallery

Gallery của chúng ta chỉ nên hiện ra khi tất cả các thành phần trên trang đã sẵn sàng. Ban đầu, một loader xuất hiện - một lần nữa hãy xem markup, nó như sau:

<div class="loading">Carousel is loading...</div>

Lúc này, chúng ta phải nghĩ về gallery mong muốn trên màn hình lớn một lần nữa. Nếu bạn xem lại những hình minh họa tương ứng, bạn sẽ thấy rằng cả hai carousel có cùng chiều cao. Để có được hành vi mong muốn đó, chúng ta phải viết một số code JavaScript tùy biến (bên cạnh CSS của chúng ta). Code này sẽ thiết lập chiều cao của carousel đầu tiên bằng với chiều cao của carousel thứ hai một cách tự động (hoặc ngược lại).

Nắm rõ những yêu cầu ở trên, đây là code sẽ chạy khi toàn bộ trang đã sẵn sàng:

$(window).on("load", () => {
  handleCarouselsHeight();
  setTimeout(() => {
    $(".loading").fadeOut();
    $("body").addClass("over-visible");
  }, 300);
});

Và đây là định nghĩa của hàm handleCarouselsHeight:

function handleCarouselsHeight() {
  if (window.matchMedia("(min-width: 1024px)").matches) {
    const gl2H = $(".gallery2)").height();
    $left.css("height", gl2H);
  } else {
    $left.css("height", "auto");
  }
}

Khi trang web được nạp, gallery hoạt động tốt. Nhưng nó cũng sẽ hoạt động nhưng mong đợi khi cửa sổ trình duyệt thay đổi kích thước.

Phần code chịu trách nhiệm cho vấn đề đó như sau:

$(window).on(
  "resize",
  _.debounce(() => {
    handleCarouselsHeight();
  }, 200)
);

Lưu ý rằng, event handler được bọc bên trong một hàm debounce. Đây là một hàm Lodash giúp chúng ta hạn chế số lần handler này được gọi.

Làm Việc với các Event và Phương Thức của Slick

Bây giờ chúng ta đã cài đặt thành công tính năng chính của gallery, hãy tiến hành bước tiếp theo và xây dựng một số thứ tùy chọn.

Trước tiên, ở góc trên bên phải của carousel thứ hai chúng ta hiện thị slide hiện tại và tổng số slide.

Để hoàn thành việc này, chúng ta nhờ đến sự kiện init và afterChange của slick.

Dưới đây là code liên quan:

/*you have to bind init event before slick's initialization (see demo) */
gl2.on("init", (event, slick) => {
  $photosCounterFirstSpan.text(`${slick.currentSlide + 1}/`);
  $(".photos-counter span:nth-child(2)").text(slick.slideCount);
});

$gl2.on("afterChange", (event, slick, currentSlide) => {
  $photosCounterFirstSpan.text(`${slick.currentSlide + 1}/`);
});

Cải tiến hơn nữa, mỗi lần chúng ta nhấp vào một slide trên carousel đầu tiên, slide tương ứng của carousel thứ hai sẽ active. Nhờ vào phương thức slickGoTo của slick, chúng ta có thể phát triển tính năng này.

Dưới đây là code liên quan:

$(".gallery .item").on("click", function() {
  const index = $(this).attr("data-slick-index");
  $gl2.slick("slickGoTo", index);
});

4. Trình Duyệt Hỗ Trợ

Bản demo sẽ hoạt động trong hầu hết các trình duyệt hiện đại và bạn có thể sử dụng nó trong dự án của mình.

Tôi chỉ gặp một lỗi nhỏ trong một số trình duyệt (Firefox, Edge) khi test bản demo trên màn hình lớn. Khi bạn nhấp vào mũi tên điều hướng, tất cả các slide của carousel đầu tiên tách khỏi cái đầu tiên, không chạm đến cạnh trên cùng của phần tử cha và chừa ra khoảng trống một pixel:

Cuối cùng nhưng không kém phần quan trọng, những cải tiến và tùy biến nhỏ có thể cần thiết khi cửa sổ trình duyệt thay đổi kích thước, tùy thuộc vào nhu cầu của bạn.

Tóm tắt

Trong bài hướng dẫn này, chúng ta đã tận dụng slick.js và cố gắng để xây dựng một responsive gallery đẹp. Hy vọng bây giờ, bạn đã sẵn sàng để thử cài đặt này trong dự án của riêng bạn. Nếu như vậy, xin hãy chia sẻ liên kết dự án của bạn trong phần bình luận bên dưới nhé!

Những dự án JavaScript khác để nâng cao trang web của bạn

• 
  Hiệu năng
  Nâng cao Hiệu năng: Cách Load Hình ảnh bằng in-view.js
  Louie Rootfield
• 
  Flickity
  Xây dựng một Slider bằng Flickity của Metafizzy
  Thoriq Firdaus
• 
  jQuery
  Mẹo Nhỏ: Hiệu ứng Cuộn với fullPage.js và Animate.css
  George Martsoukos
• 
  JavaScript
  Cách tạo một Slider Chia màn hình với JavaScript
  Adi Purdila