Tự động trình chiếu javascript

Đây là dạng slide cơ bản, lí do mình viết bài này là để giúp các bạn hiểu về cách làm slide bằng javascript. Thay vì lao vào ngay các thư viện tại sao ta không thử tìm hiểu qua cách hoạt động của Slide đúng sai 😁😁

Để bắt đầu thì trước tiên mình sẽ tạo HTML nhé

  
    
      Slideshow With Vanilla JavaScript
    
    
      
    
  
  
    
      
        
      
      Simon
      Student
      
        Lorem ipsum dolor sit amet, consectetur adipisicing
        elit, sed do eiusmod tempor incididunt ut labore et
        dolore magna aliqua. Ut enim ad minim veniam.
      
    
    
    ...
  

Ở đoạn HTML mình tạo 1 div nav dùng để chứa nút left và right. Thêm các hình vào hộp đánh giá div. Ở đây mình sẽ chọn 1 vài hình để làm biểu tượng

css section cũng khá đơn giản. Mình sẽ show các phần chính 😁😁 còn lại các bạn style theo ý mình nhé. Nguồn mình để ở đầu bài viết nhé

.review-box {
    display: flex;
    /* overflow: hidden; */
    transition: transform 0.3s linear;
}

Lí do mình chuyển đổi thêm vì mình sẽ sử dụng javascript thêm các hiệu ứng vào hộp đánh giá ^^

Tiếp theo ta sẽ tới javascript nhé. Mình sẽ giải thích từng đoạn code để các bạn hiểu

👉 Đầu tiên chúng ta sẽ nhận được các yếu tố cần thiết nhé

const listBox = document.querySelectorAll['.box'];
const wrapperBox = document.querySelector['.review-box'];
const btnLeft = document.querySelector['.btnLeft'];
const btnRight = document.querySelector['.btnRight'];
const reviewDiv = document.querySelector['.review'];

Bước tiếp theo ta cần phải tìm chiều rộng của 1 hộp trong slide và đặt chiều rộng cho div cha dựa trên chiều rộng của hộp. Làm như vậy để các hộp của chúng tôi nằm trên một hàng hóa và để được định dạng slide này. chiều rộng của hộp ta phải định lại. Đó là lí do ta phải tìm chiều rộng của hộp

Mình sẽ tạo một chức năng

.review-box {
    display: flex;
    /* overflow: hidden; */
    transition: transform 0.3s linear;
}

Ta cùng đi tìm width cho parent và width of 1 box

const widthItemAndMargin = reviewDiv.offsetWidth / amountSlideAppear;
let widthAllBox = widthItemAndMargin * listBox.length;

Ta will find width 1 box by way

Mình sẽ lấy chiều rộng cố định của div parent. Ở đây mình sẽ lấy div reviewDiv, Sau đó bạn chia cho hộp số lượng muốn hiển thị ra sẽ tìm được chiều rộng 1 hộp

Ví dụ mình muốn có 3 box show như hình trên thì sẽ lấy reviewDiv / 3 = width 1 box

Đối với việc tìm chiều rộng cho div parent chứa slide thì công việc khá đơn giản. ta chỉ cần lấy số lượng hộp * chiều rộng 1 hộp

Ta sẽ đặt chiều rộng cho div cha

wrapperBox.style.width = `${widthAllBox}px`;

Thành công ở bước đầu tiên, tiếp theo mình sẽ tạo khoảng cách cho các hộp bằng cách đặt

.review-box {
    display: flex;
    /* overflow: hidden; */
    transition: transform 0.3s linear;
}

👉 in widthItemAndMargin biến widthItemAndMargin đã bao gồm lề của hộp rồi. nếu bạn muốn thiết lập chỉ việc sử dụng lề cho hộp và bỏ phần lề đi sẽ làm tăng chiều rộng thực tế của hộp

listBox.forEach[[element] => {
  element.style.marginRight = '20px';
  element.style.width = `${widthItemAndMargin - 20}px`;
}];

Sau khi xử lý width ta sẽ đi tới phần nút trái và phải

Mình sẽ tạo một biến count = 0 để tính toán vị trí của các box. Muốn các hộp chuyển động sang trái hoặc phải ta sẽ sử dụng thuộc tính dịch để chuyển cha mẹ div theo ý muốn

To set translate true, ta cần phải tính toán khi nào đến ô cuối thì ta sẽ trượt về ô đầu và lùi lại

Ở đây mình sẽ tìm hộp định vị cuối cùng như sau

Lấy chiều rộng của toàn bộ hộp ngoại trừ số lượng hộp muốn hiển thị. Ta sẽ tìm thấy vị trí cuối cùng của hộp xuất hiện

Ví dụ của tôi

Ta có 4 hộp

chiều rộng 1 hộp 300px

chiều rộng tất cả các hộp là 4*300 = 1200px

Trên màn hình mình muốn có 3 ô xuất hiện. And when click on button will tiến hoặc lùi 1 ô

Như vậy hộp ví trí cuối cùng xuất hiện sẽ là 1200px - 3*300 = 300px

Mình biết sẽ khó hiểu nhưng các bạn hãy tưởng tượng và điều khiển. log vị trí từng ô sẽ hiểu nha 😁

Tất cả các câu chuyện đơn giản hơn khi chúng ta tìm thấy hộp định vị cuối cùng xuất hiện

Tiếp theo chỉ cần xử lý nút trái và phải là xong rồi ^^

btnRight.addEventListener['click', function [] {
  count += widthItemAndMargin;

  if [count > spacing] {
    count = 0;
  }
  wrapperBox.style.transform = `translateX[${-count}px]`;
}];

Với mỗi lần nhấp vào nút vô bên phải, mình sẽ dịch của cha mẹ đi ngược với tốc độ tiến bằng chiều rộng của một hộp. Khi quay về bên trái, hộp bên phải sẽ hiển thị

Đặt điều kiện nếu như ta có quá vị trí hộp cuối cùng xuất hiện ở bên phải ngoài cùng. then will set count = 0 tức thời trở về vị trí trượt đầu tiên

Tương tự như vậy với nút bên trái

.review-box {
    display: flex;
    /* overflow: hidden; */
    transition: transform 0.3s linear;
}

Tiếp theo ta sẽ đến phần responsive, phần này cũng đơn giản và rút gọn. Cùng tìm hiểu nhé

.review-box {
    display: flex;
    /* overflow: hidden; */
    transition: transform 0.3s linear;
}

Mình dùng sự kiện thay đổi kích thước để biết khi màn hình giảm chiều rộng hoặc tăng chiều rộng, ta sẽ tìm được 1 ô chiều rộng và đặt số lượng slide muốn hiển thị

MatchMedia còn lại sẽ thực thi khi màn hình là máy tính xách tay hoặc điện thoại di động,. tương ứng sẽ hiển thị hộp số lượng màn hình mà ta muốn

And here is results

Đây là phần javascript toàn bộ

.review-box {
    display: flex;
    /* overflow: hidden; */
    transition: transform 0.3s linear;
}

🔥👉 Như vậy là mình đã hướng dẫn cho các bạn xong cách làm 1 slide đơn giản và đẹp mắt rồi. Qua bài hướng dẫn này mình hi vọng các bạn sẽ hiểu cách hoạt động của kiểu slide này và sẽ sáng tạo ra được các kiểu slide đẹp mắt khác