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é
Ở đ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é
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é
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 1 với tham số là số lượng hộp muốn hiển thị trên màn hình. Như hình trên là 3 hộpTa cùng đi tìm width cho parent và width of 1 box
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
Đố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
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 2 cho từng hộp👉 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
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 ________số 8Lấ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
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 ^^
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 0Tiế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é 1Mì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ộ 0🔥👉 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 |