Hiện nay để tạo thêm nhiều sự tiện lợi cho người dùng, để người dùng có được trải nghiệm tối ưu nhất và đặc biệt là những người dùng trang web của chúng ta trên nền tảng smartphone. Ngoài việc chúng ta chỉ tạo những nút điều hướng để chuyển slide thì chúng ta có thể tích hợp thêm dạng vuốt để người dùng tiện lợi hơn trong việc xem các slide trên trang của chúng ta. Có khá nhiều trang web nổi tiếng cũng sử dụng chức năng này cho các slide của họ ví dụ như tiki, shopee,…
II.Thực Hiện:
Bước 1: Chúng ta sẽ code trên html.
Bước 2: chúng ta sẽ CSS cho nó 1 tí để nó nhìn đẹp hơn.
Các câu lệnh này dùng để tí nữa chúng ta tính toán số liệu và gán vào translateX để chuyển slide và 2 câu lệnh dưới dùng để tạo hiệu ứng khi vuốt slide cho mượt mà hơn.
Bước 3: chúng ta sẽ qua code javascript.
Chúng ta sẽ dùng vòng lặp for để thêm ảnh vào html.
Chúng ta sẽ khởi tạo 1 số biến để lưu giá trị khi làm việc và tạo 1 mảng slides để lưu các class có tên slide chúng ta đặt ở trên.
Chúng ta sử dụng forEach để gán sự kiện cho từng phần tử của mảng slides. Bên Dưới là các sự kiện xảy ra khi người dùng thực hiện việc vuốt chuột.
Hàm này dùng để lấy tọa độ của người dùng khi sự kiện vuốt chuột xảy ra.
Sự kiện touchstart xảy ra khi người dùng chạm vào một phần tử(vừa click chuột xuống).
Biến này dùng để lưu tọa độ click chuột của người dùng khi vừa click xuống màn hình.
Biến này dùng để check rằng người dùng đã thực hiện việc click vào slide của chúng ta hay chưa hiện tại là đã click nên chúng ta gán giá trị = true;
Sự kiện này xảy ra khi người dùng di chuyển ngón tay trên màn hình
Câu lệnh này dùng để lấy tọa độ vị trí cuối cùng của con chuột sau khi người dùng đã hoàn thành việc vuốt.
Sự kiện touchEnd xảy ra khi người dùng loại bỏ ngón tay khỏi một phần tử(đã kết thúc việc vuốt).
Câu lệnh này dùng để tính toán khoảng cách vuốt của người dùng ý tưởng là nếu khoảng cách nằm trong khoảng từ (-100px ???? 0 && 0 ???? 100px) thì không thực hiện việc chuyển slide nếu nằm ngoài mới thực hiện chuyển slide và check việc người dùng đang vuốt sang trái hay sang phải để chuyển slide tiếp theo.
Câu lệnh này dùng tính toán con số chúng ta sẽ gán cho translateX để thực hiện việc next hoặc prev slide.
Và thế là chúng ta đã hoàn thành tính năng vuốt slide.
2 Hàm này thực hiện việc tự động chuyển slide và gán sự kiện cho 2 nút next và prev slide. Chúng ta chỉ cần thay đổi biến currentIndex(vị trí của slide) và gọi là hàm setlaivitri() là được.
Tác giả: Thy Đào Quốc – Ngày viết: 22/03/2023
Danh mục: Chương trình đào tạo, CNTT – Thiết kế Website, CNTT – Ứng dụng phần mềm, Ngành Công nghệ thông tin – Ứng dụng phần mềm, NHÓM NGÀNH CÔNG NGHỆ
