Tin Tức

Nội dung được bảo vệ bởi DMCA.com

Tạo Slide Ảnh Dạng 3D Bằng Swiper Dạng Xếp Lớp Siêu Dễ

Đăng bởi Thuấn Luviet vào lúc 19/08/2025

Các bài viết trước tôi đã hướng dẫn các bạn tạo slide carousel ảnh độc lạ rồi. Trong bài này tiếp tục tôi sẽ hướng dẫn các bạn tự Tạo Slide Ảnh Dạng 3D Xếp Lớp Siêu Dễ trên website wordpress dùng theme flatsome.

Tạo Slide Ảnh Dạng 3D Bằng Swiper Dạng Xếp Lớp Siêu Dễ

Bước 1: Chuẩn Bị Tạo Slide Ảnh Dạng 3D Bằng Swiper Dạng Xếp Lớp Siêu Dễ

Link ảnh được tải lên website của bạn

Nếu chưa biết cách tải ảnh và lấy link trên wordpress thì xem video này nhé

https://www.youtube.com/watch?v=c6lxFaWKYH4

Bước 2: Copy Code Sau Vào Funtions.php của wordpress

Với flatsome thì Dán trong Giao diện/Sửa tệp tin giao diện. Còn các theme khác thì bạn tìm hiểu theo hướng dẫn của nhà cung cấp nhé.

Truy cập Giao diện, đến phần sửa tệp tin giao diện.


Sau đó chọn bấm vào Functions.php bên tay phải.

Lưu lại

Bước 3: Thêm Short Code trong Ux-Builder với công cụ html ở section mà bạn muốn nó hiện thị.

[luviet_3D_slider]

Bước 4: Kiểm tra và điều chỉnh slide Tạo Slide Ảnh Dạng 3D Bằng Swiper Dạng Xếp Lớp Siêu Dễ

 Vào lại file functions.php và tìm các từ khóa bôi vàng

- Điều chỉnh thời gian chuyển slide: Vào lại file functions.php và tìm autoplay: 5000 để điều chỉnh thời gian. Ở đây đang mặc định là 5 giây(5000).

- Số lượng ảnh slide hiện thị: slidesPerView: 'auto', đang để tự động

Điều chỉnh số ảnh hiển thị cùng lúc

Hiện tại bạn để slidesPerView: 'auto' → Swiper sẽ tính theo kích thước slide + màn hình.

  • Nếu bạn muốn cố định số slide hiển thị (ví dụ 3 cái cùng lúc):

slidesPerView: 3,
  • Nếu muốn 5 cái:

slidesPerView: 5,

👉 Khi dùng coverflow, thường kết hợp centeredSlides: true để 1 ảnh to ở giữa, 2–4 ảnh nhỏ hai bên.

Như vậy là bạn đã biết cách Tạo Slide Ảnh Dạng 3D Bằng Swiper Dạng Xếp Lớp Siêu Dễ rồi

Hãy nhớ đăng ký kênh và nhắn tin vào fanpage cho tôi nếu bạn đã làm được nhé

https://facebook.com/webluviet


Nhận xét

Thiết kế website và blog bán hàng Luviet
HỖ TRỢ
www.luviet.com
icon icon icon