Hi 🤓 Cảm ơn bạn đã ghé thăm blog này, nếu những bài viết trên blog giúp ích cho bạn. Bạn có thể giúp blog hiển thị quảng cáo bằng cách tạm ngừng ad blocker 😫 và để giúp blog duy trì hoạt động nếu bạn muốn.
Cảm ơn bạn!

Tạo slide nhanh chóng và đẹp mắt với jquery slick slider

@devnavOct 30, 20214 min read...

Jquery Slick

Cho những bạn nào chưa biết thì đây là một plugin hỗ trợ chúng ta trong việc tạo ra responsive carousel mà chúng ta thường thấy trên các website ^^.

Trước khi bắt đầu tìm hiểu cách sử dụng plugin này thì đối với một số bạn đang bắt đầu học javascript và muốn học cách tạo slide thì mình có làm một bài viết hướng dẫn cách code tạo slide bằng javascript các bạn có thể đọc bài viết tại đây:

Make slide with vanilla javascript

Chuẩn bị

Để sử dụng plugin này chúng ta cần embed các link mà slick slider yêu cầu, các bạn có thể tải về và import. Mình sẽ sử dụng cdn của plugin này ^^.

// CSS Nhúng ở phần header
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>

// Sử dụng slick-theme.css nếu bạn muốn sử dụng default styling
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>

// JS Nhúng trên </body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
        integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" 
        crossorigin="anonymous" 
        referrerpolicy="no-referrer">
</script>

<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

Vì slick sử dụng jquery nên các bạn lưu ý nhúng slick bên dưới link jquery.

Code

Mình sử dụng API của Steam cung cấp để lấy data. Tuy nhiên khi fetch chúng ta sẽ gặp lỗi CORS. Các bạn có thể sử dụng cors-anywhere để fix lỗi này.

fetch('https://corsanywhere.herokuapp.com/https://store.steampowered.com/api/featured')
        .then((response) => response.json())
        .then((data) => {})

Để sử dụng corsanywhere, các bạn hãy click vào đường link: https://corsanywhere.herokuapp.com/ để active.

Sau khi get API thành công chúng ta sẽ được như sau:

[
  {
    currency: "USD"
    discount_percent: 13
    final_price: 1142
    large_capsule_image: "https://cdn.akamai.steamstatic.com/steam/apps/1206060/capsule_616x353.jpg?t=1635450978"
    name: "Happy Game"
    original_price: 1313
  },
  {
    ...
  }
]

Tiếp theo ta sẽ sử dụng data này như sau:

fetch('https://cors-anywhere.herokuapp.com/https://store.steampowered.com/api/featured')
  .then((response) => response.json())
  .then((data) => {
  const { featured_win } = data;

  const featuredGame = featured_win.filter(
    (game) => game.discount_percent > 0
  );

  featuredGame.forEach((element) => {
    const {
      final_price, 
      original_price, 
      discount_percent, 
      currency
    } = element;

    const moneyFormatter = new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: currency,
      minimumFractionDigits: 1,
    });

    $('.container .list').append(
  `<div class="info">
    <div class="thumbnail">
      <img src="${element.large_capsule_image}"/>
    </div>
    <div class="info-game">
      <h2 class="post-title"><a href="">${element.name}</a></h2>
      <div class="price">
        <span class="percent">-${discount_percent}%</span>
        <div class="discount-price">
          <div class="original-price">
            ${moneyFormatter.format(original_price)}
          </div>
          <div class="final-price">
            ${moneyFormatter.format(final_price)}
          </div>
        </div>
      </div>
    </div>
  </div>`);
  });
})

Ở data trên có sử dụng đơn vị tiền tệ. Nếu các bạn muốn format thì có thể đọc bài viết hướng dẫn về Intl tại: Intl trong javascript

Slick Slider

Không để các bạn đợi lâu chúng ta cùng tới phần sử dụng plugin slick slider 😁

Đây là bước cuối cùng để hiển thị slide. Mình sẽ lấy danh sách các element muốn thêm vào để tạo slide. Các bạn chỉ cần lấy parent element của những element này. Việc còn lại thì để slick slider xử lí.

$('.container .list').slick({
  dots: true,
  arrows: true,
  autoplaySpeed: 5000,
  autoplay: true,
  slidesToShow: 3,
  slidesToScroll: 1,
  prevArrow: $('.btn-prev'),
  nextArrow: $('.btn-next'),
});

Các bạn có thể design lại button nếu như không muốn sử dụng default button.

Để hiển thị slide phù hợp với các loại màn hình thì slick slider cũng hỗ trợ cho chúng ta bằng cách thêm option responsive:

responsive: [
  {
    breakpoint: 1200,
    settings: {
      arrows: false,
      centerMode: true,
      centerPadding: '30px',
      slidesToShow: 2,
    },
  },
  {
    breakpoint: 625,
    settings: {
      arrows: false,
      centerMode: true,
      centerPadding: '30px',
      slidesToShow: 1,
    },
  },
],
});

Sau đây là phần code hoàn thiện:

Kết luận

Hi vọng sau bài viết này các bạn có thể hiểu hơn về plugin slick slider này. Hẹn gặp các bạn trong các bạn viết sau ^^.

TABLE OF CONTENTS