Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Tạo Slider Và Carousel Với Thư Viện Splide

Tạo Slider Và Carousel Với Thư Viện Splide


Ngày 8 Tháng 10 Năm 2020

Tạo Slider Và Carousel Với Thư Viện Splide

Ngày hôm nay chúng ta sẽ đi vào tìm hiểu cách tạo slider, carousel cho trang web bằng việc kết hợp giữa HTML, CSS và Thư Viện Splide nhé!

Giới Thiệu Về Thư Viện Splide

Đây là một thư viện được viết bằng Javascript có kích thước nhỏ gọn với nhiều tính năng hữu ích đi kèm. Nó giúp bạn có thể dễ dàng tạo ra slider, carousel cho trang web của mình mà không cần bất kỳ thư viện bổ sung nào.

Để thiết lập thư viện Splide cho trang web thì chúng ta cần phải thêm hai đường dẫn file CDN CSS và Javascript của thư viện mà mình đặt ở dưới đây nhé:

  • <script src="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide.min.js"></script>
  • <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/css/splide.min.css" />

Do để dễ dàng áp dụng cho nhiều loại dự án web khác nhau thì mình sẽ sử dụng splide với Javascript thuần. Nếu bạn muốn tham khảo thêm về việc áp dụng thư viện splide cho Vue và React thì có thể xem ở đường dẫn bên dưới nhé:

Tạo Slider Với Thư Viện Splide Javascript

Bây giờ chúng ta sẽ đi vào phần tạo ví dụ chi tiết để giúp bạn có thể dễ dàng sử dụng nó trong thực tế hơn nhé!

Đầu tiên chúng ta sẽ tạo hai file là index.htmlstyle.css. Sau đó liên kết chúng với các đường dẫn CDN cần thiết cho việc tạo slider như đường dẫn CDN của thư viện Splide, Google Font. Để hiểu rõ hơn bạn xem đoạn mã sau nhé:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tạo Slider Với Splide Javascript</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,[email protected],400;1,500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/css/splide.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide.min.js"></script>
</body>
</html>

Trước khi đi vào thêm các phần tử HTML thì mình có lưu ý về đoạn mã cấu trúc tổng quát HTML của thư viện Splide. Chúng ta sẽ sử dụng đoạn code tổng quát mà thư viện cung cấp để xây dựng silder cũng như có thể hiểu được luồng của nó trong HTML nhé:

Cấu Trúc Tổng Quát HTML Splide:

<div class="splide">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide">Nội Dung Slide 1</li>
      <li class="splide__slide">Nội Dung Slide 2</li>
      <li class="splide__slide">Nội Dung Slide 3</li>
    </ul>
  </div>
</div>

Sau khi bạn đã hiểu được cấu trúc tổng quá của nó thì chúng ta sẽ đi vào thiết kế slider bằng việc kết hợp thư viện Splide với HTML, CSS, JS thông qua đoạn mã sau nhé:

HTML Slider:

<h2>Tạo Slider Với Splide</h2>
<div class="container">
  <div class="splide" id="splide">
    <div class="splide__track">
      <ul class="splide__list">
        <li class="splide__slide">
          <img src="https://images.pexels.com/photos/1581484/pexels-photo-1581484.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
        </li>
        <li class="splide__slide">
          <img src="https://images.pexels.com/photos/3662103/pexels-photo-3662103.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
        </li>
        <li class="splide__slide">
          <img src="https://images.pexels.com/photos/1640777/pexels-photo-1640777.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
        </li>
      </ul>
    </div>
  </div>
</div>

CSS Slider:

body{
  font-family: 'Montserrat', sans-serif;
}
h2{
  text-align:center;
  text-shadow: 0px 10px 10px #234D3C;
}
/*Thiết lập độ rộng, vị trí cho slider*/
.container{
  margin: auto;
  width: 40%;
  box-shadow: 0 1px 1px rgba(0,0,0,0.12),
              0 2px 2px rgba(0,0,0,0.12),
              0 4px 4px rgba(0,0,0,0.12),
              0 8px 8px rgba(0,0,0,0.12),
              0 16px 16px rgba(0,0,0,0.12);
}
/*Thiết lập hình ảnh có độ dài và độ rộng toàn bộ slider*/
img{
  width: 100%;
  height:100%;
}

Khởi Tạo Thư Viện Bằng Javascript

new Splide( '#splide' ).mount();

Và kết quả cuối cùng bạn xem ở bên dưới nhé:

See the Pen Tạo Slider Với Splide by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Tạo Slider Multipage Với Splide

Trong phần này mình sẽ tạo 2 hình ảnh trên một slide bằng việc sử dụng đoạn mã thiết lập Javascript sau đây nhé:

Slider Multipage Javascript

new Splide( '#splide', {
    perPage: 2,
    rewind : true,
} ).mount();

Đối với đoạn mã HTML, CSS thì bạn xem trên Codepen cùng với kết quả luôn nhé:

See the Pen Tạo Slider Multipage Với Splide by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Tạo Slider Vertical(Theo Chiều Dọc) Với Splide

Để thiết lập slider theo chiều dọc(vertical) trong thư viện Splide thì chúng ta sẽ sử dụng đoạn mã Javascript khởi tạo sau nhé:

Slider Vertical Javascript

new Splide( '#splide', {
   direction: 'ttb',
   height   : '20rem',
} ).mount();

Đối với đoạn mã HTML, CSS thì bạn xem trên Codepen cùng với kết quả luôn nhé:

See the Pen Tạo Slider Vertical(Theo Chiều Dọc) Với Splide by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Thiết Lập Hiển Thị Trên Nhiều Màn Hình

Trong phần này chúng ta sẽ đi vào tìm hiểu cách thiết lập việc hiển thị số lượng hình ảnh của slider trên từng màn hình khác nhau thông qua thuộc tính breakpoints trong đoạn mã sau nhé:

Javascript

new Splide( '#splide', {
  perPage: 3,
  breakpoints: {
    '640': {
      perPage: 2,
      gap    : '1rem',
    },
    '480': {
      perPage: 1,
      gap    : '1rem',
    },
  }
} ).mount();

Đối với đoạn mã HTML, CSS thì bạn xem trên Codepen cùng với kết quả luôn nhé:

See the Pen Thiet Ke Responsive Slider Với Splide by haycuoilennao19 (@haycuoilennao19) on CodePen.

Bạn hãy thu phóng cửa sổ màn hình hoặc chọn chế độ screen 0.5x, 0.25x trên Codepen để thấy kết quả nhé!

Nguồn

Nếu bạn muốn tham khảo thêm về các hiệu ứng cho slider, carousel khác của thư viện Splide thì có thể truy cập ở đây nhé

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những kiến thức để tạo slider, carousel hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

Load WooCommerce Stores in 249ms!