Tìm kiếm

Front End: Làm Slider Đơn Giản Hơn Bao Giờ Hết Với Thư Viện Swiper

Như các bạn đã biết việc làm slide ảnh và hoạt động tốt việc dùng HTML, CSS để viết nên thì nó rất là cất công. Nhận thấy điều đó rất tốn thời gian và công sức cho nên đã có rất nhiều thư viện ra đời và hỗ trợ cho việc này, phải kể đến các thư viện: Owl Carousel, Slider, Slick, Swiper,... Mình từng dùng thư viện Swiper cho một project của mình và mình nhận thấy rằng nó đem lại hiệu quả rất tốt cho việc tạo slide, cách dùng cũng rất đơn giản, không cần cài đặt nhiều. Để cài đặt và sử dụng nó chúng ta cần:

Thư viện Swiper slider là một thư viện JavaScript mã nguồn mở dùng để tạo các thanh trượt (slider) hoạt động mượt mà và đáp ứng trên các trang web và ứng dụng di động. Nó cung cấp các tính năng linh hoạt cho việc tạo các carousel, galleries, và các thanh trượt hình ảnh và văn bản khác.

Dưới đây là một số điểm nổi bật của thư viện Swiper slider:

  1. Mạnh mẽ và đa dạng: Swiper cho phép bạn tùy chỉnh rất nhiều thuộc tính, từ số lượng phần tử hiển thị, tốc độ trượt, các hiệu ứng chuyển đổi và nhiều tính năng khác.
  2. Hỗ trợ đa nền tảng: Swiper hoạt động tốt trên nhiều trình duyệt khác nhau và cả trên các thiết bị di động. Điều này giúp đảm bảo trải nghiệm người dùng mượt mà và nhất quán.
  3. Hỗ trợ cảm ứng: Swiper được thiết kế với hỗ trợ cảm ứng, điều này có nghĩa là người dùng có thể trượt qua các phần tử bằng cách sử dụng ngón tay trên màn hình cảm ứng.
  4. API mạnh mẽ: Swiper cung cấp một API mạnh mẽ cho việc tương tác và kiểm soát từ code JavaScript của bạn.
  5. Hướng dẫn và tài liệu tốt: Swiper đi kèm với tài liệu đầy đủ và ví dụ minh họa, giúp bạn dễ dàng bắt đầu và tùy chỉnh theo ý muốn.
  6. Cộng đồng lớn: Với một cộng đồng phát triển rộng lớn, bạn có thể tìm thấy nhiều nguồn hữu ích, ví dụ và plugin liên quan đến Swiper.
Cài đặt:
- Sử dụng NPM:
$ npm install swiper
- Sử dụng CDN:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
Cú pháp cơ bản:
Thêm đoạn mã vào HTML 
<div class="swiper">
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- Nếu cần thêm phân trang -->
  <div class="swiper-pagination"></div>
  <!-- Nếu chúng ta cần thêm các nút điều hướng -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
   <!-- Nếu chúng ta cần thanh cuộn -->
  <div class="swiper-scrollbar"></div>
</div>
Swiper CSS styles/Size:
.swiper {
  width: 600px;
  height: 300px;
}
Cuối cùng, chúng ta cần khởi tạo JS:
// Thêm thư viện Swiper
import Swiper from 'swiper/bundle';
import 'swiper/css/bundle';
const swiper = new Swiper('.swiper', {
  // Các parameters
  direction: 'vertical',
  loop: true,
  // Nếu chúng ta cần phân trang
  pagination: {
    el: '.swiper-pagination',
  },
  // Các nút điều hướng
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  // Cần thanh cuộn
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});

Các thuộc tính custom của Navigation:

  • nextEL: String

Chuỗi CSS selector hoặc phần tử HTML sẽ hoạt động như nút “next” sau khi click vào nó

  • prevEL: String

Chuỗi CSS selector hoặc phần tử HTML sẽ hoạt động như nút “prev” sau khi click vào nó

Các thuộc tính custom của Pagination:

  • el: String

Chuỗi CSS selector hoặc phần tử HTML có phân trang và các loại phân trang: “bullets”, “fraction”, “progressbar” hoặc “custom”.

Chúng ta cũng có thể chỉnh sửa thuộc tính mặc địch của navigation hoặc pagination bằng cách can thiệp trực tiếp vào class chung của chúng hoặc thêm class khác để cấu hình chúng lại.

//HTML
   <!-- Thêm class chung navigation -->
    <div class="swiper-button-prev navigation"></div>
    <div class="swiper-button-next navigation"></div>
    <!-- Thêm class chung pagination -->
    <div class="swiper-pagination pagination"></div>
//CSS
   .navigation {
    padding:0 20px;
    color: white;
  }
  .pagination{
    bottom:24px;
  }
  .swiper-pagination-bullet {
    height:12px;
    width: 12px;
  }
  .swiper-pagination-bullet-active {
    background-color: #0ea5e9;
Ngoài ra chúng ta có thể thêm các Parameters tùy chọn tùy theo mục đích mà ta cần sử dụng:
  // Cho slide trượt tự động sau 3s
autoplay: {
  delay: 3000
},
//Mặc định cho 2 slide ảnh trong 1 khung và khoảng cách cho 2 slide là 12px
slidesPerView: 2,
spaceBetween: 12,
// Tạo điểm ngắt ở từng màn hình cho slide
breakpoints: {
  768: { slidesPerView: 3 }, // 768: sẽ có 3 ảnh được hiển thị
  1024: { slidesPerView: 4 } // 1024: sẽ có 4 ảnh được hiển thị
},

Link code demo: 
https://codepen.io/GreencrisMessi/pen/WNywGyV
*Chú ý: đối với việc nhập 1 ảnh mà không muốn hiển thị các nút điều hướng hay phân trang:

const numberOfSlides = document.querySelectorAll('.swiper-slide').length;
const swiper = new Swiper('.swiper', {
  allowSlidePrev: numberOfSlides === 1 ? false : true,
      allowSlideNext: numberOfSlides === 1 ? false : true,
  autoplay: {
        delay: 3000
      },
      slidesPerView: 1,
      spaceBetween: 12,
      centeredSlides: false,
  pagination: {
    el: '.swiper-pagination',
  },
  navigation: {
        nextEl: document.querySelector('.swiper-button-next'),
        prevEl: document.querySelector('.swiper-button-prev')
      },
      on: {
        init: function () {
          const numberOfSlides = this.slides.length;
          if (numberOfSlides &lt;= 1) {
            this.allowSlidePrev = this.allowSlideNext = false;
            this.el.querySelector('.swiper-button-prev').setAttribute('class', 'hidden');
            this.el.querySelector('.swiper-button-next').setAttribute('class', 'hidden');
          } else {
            this.el.querySelector('.swiper-button-prev').removeAttribute('hidden');
            this.el.querySelector('.swiper-button-next').removeAttribute('hidden');
          }
        }
      }
});

Link code demo:
https://codepen.io/GreencrisMessi/pen/GRGyrzj

Phần mở rộng sử dụng thư viện swiper vào trong Modal (Bootstrap) để tạo popup về slide ảnh:
- Link tham khảo modal trong Bootstrap: https://getbootstrap.com/docs/5.2/components/modal/
- Tạo một Modal đơn giản: 

Link CDN:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384 MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!-- Nút kích hoạt để mở modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
 Demo
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      //Ở phần body chúng ta có thể thêm đoạn code slide để xem ảnh hiển thị
      <div class="modal-body">
      <div class="swiper">
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- Nếu cần thêm phân trang -->
  <div class="swiper-pagination"></div>
  <!-- Nếu chúng ta cần thêm các nút điều hướng -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
   <!-- Nếu chúng ta cần thanh cuộn -->
  <div class="swiper-scrollbar"></div>
</div>
</div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Chúng ta, có thể thêm slide ở bất cứ đâu trong modal (header, body, footer). Nhưng mình khuyên các bạn nên để vào phần body để dễ quản lý và kiểm soát code của mình tốt hơn.
Tương tự như cách thêm code HTML, CSS, JS chúng ta cũng viết các file để chạy.
Link code demo:
https://codepen.io/GreencrisMessi/pen/OJEzWmN

Tags

Bạn có thể thích những bài đăng này

Nhận xét

Mới hơn Cũ hơn