Chào mừng mọi người đã quay lại với serie học gì chia sẻ nấy và mình là Tuyền. Hôm trước, mình có chia sẻ một ít kiến thức về Interceptor Axios mà mình tìm hiểu được. Tiếp tục, chuỗi seri này thì hôm nay mình sẽ chia sẻ về các thư viện và ngôn ngữ mà mình đã học được và dùng nó trong một dự án mà mình được tham gia.

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: Swiper slider là một thư viện hỗ trợ chức năng thu phóng hình ảnh, chạy slider trên web khá hay và đơn giản. Cài đặt:

Sử dụng NPM:
$ npm install swiper
Sử dụng CDN:


`

Cú pháp cơ bản:   
Thêm đoạn mã vào HTML 

Slide 1
Slide 2
Slide 3
...

 Swiper CSS styles/Size:

 Cuối cùng, chúng ta cần khởi tạo JS:

el: '.swiper-pagination',

nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',

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. 

//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 <= 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');
          }
        }
      }
});

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:

 Demo



  

    

      

        
Modal title
        
      
      //Ở phần body chúng ta có thể thêm đoạn code slide để xem ảnh hiển thị
      

      

  

    
    
Slide 1
    
Slide 2
    
Slide 3
    ...
  
  
  

  
  

  

   
  



      
      

        Close
        Save changes