[Thủ Thuật Flatsome] Cách Custom Slider Flatsome cực đẹp

[Thủ Thuật Flatsome] Cách Custom Slider Flatsome cực đẹp . Slider được custom siêu đẹp được tạo từ theme Flatsome. Dưới đây là đoạn snippet code custom UI Flatsome. Cùng Chothemewp đi tìm hiểu cách làm nhé

Custom Slider Flatsome cuc dep 2

Bước 1: Tiến hành thêm code HTML

Bạn có thể chèn nó trong phần editor của trang/ bài viết. Đây là đoạn chứa các element slider

Mỗi banner được định nghĩa bằng cặp thẻ ux_banner và chứa các phần tử như text_box, ux_stack, ux_image, và ux_text. Mỗi ux_banner có chiều cao khác nhau và được thiết lập với một hình nền khác nhau (được xác định bằng thuộc tính bg).

Trong mỗi ux_banner, có một hình ảnh (ux_image) và một đoạn văn bản (ux_text). Có thể thấy rằng nội dung văn bản (ux_text) trong mỗi banner có nội dung giống nhau (“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis sapien euismod, dapibus erat sed, accumsan ipsum. Quisque laoreet, nisi at ultricies luctus.”) nhưng có thể được sửa đổi để thay đổi nội dung hiển thị cho mỗi banner khác nhau.

Bước 2: Thêm Style CSS vào theme hoặc phần tùy biến của Flatsome

Đoạn mã trên là CSS được sử dụng để tạo hiệu ứng slide cho một loạt các phần tử trên trang web. Nó sử dụng flexbox để xếp các phần tử trong một hàng và thực hiện các chuyển đổi khi một phần tử được chọn làm active.

  • display: flex;flex-direction: row; được sử dụng để xếp các phần tử theo hàng ngang.
  • align-items: stretch; giúp các phần tử trong hàng có chiều cao giống nhau.
  • overflow: hidden; để ẩn nội dung vượt ra khỏi phần tử chứa.
  • transition được sử dụng để tạo hiệu ứng chuyển đổi mượt mà khi thay đổi trạng thái của các phần tử.
  • Các thuộc tính như min-width, margin, padding, border, và border-radius được sử dụng để điều chỉnh kích thước và kiểu dáng của các phần tử.
  • background-size được điều chỉnh để thay đổi kích thước hình nền của các phần tử.

Ngoài ra, có một số quy tắc và hiệu ứng đặc biệt áp dụng cho trạng thái active và không active của các phần tử:

  • Khi một phần tử được chọn làm active (active class), nó mở rộng lớn hơn và có hiệu ứng chuyển đổi lớn hơn so với các phần tử khác.
  • Có sử dụng transition để tạo hiệu ứng mờ dần khi chuyển đổi giữa trạng thái active và không active.
  • Các thiết lập cụ thể dành cho responsive design (tương thích với các thiết bị có kích thước màn hình nhỏ hơn) được xác định trong phần @media.

Những quy tắc này giúp tạo ra một giao diện linh hoạt và thú vị cho các phần tử trên trang web, đặc biệt là trong việc hiển thị và thay đổi giữa các phần tử active và không active.

Bước 3: Thêm JavaScript

Đoạn mã JavaScript này sử dụng thư viện jQuery để thêm chức năng khi người dùng nhấp vào một phần tử có class là “option”.

  • jQuery(function(){...}); là cách viết tắt của jQuery(document).ready(function(){...});, nó sẽ chạy mã JavaScript bên trong khi toàn bộ cấu trúc HTML đã được tải xong.
  • jQuery(".option").click(function(){...}); chọn tất cả các phần tử có class là “option” và gắn một sự kiện “click” cho chúng. Đoạn mã bên trong sẽ được thực thi khi một phần tử “option” được nhấp vào.
  • Trong phần xử lý sự kiện click, đoạn mã:
    • jQuery(".option").removeClass("active"); gỡ bỏ class “active” khỏi tất cả các phần tử có class là “option”.
    • jQuery(this).addClass("active"); thêm class “active” cho phần tử được nhấp vào, thông qua jQuery(this).

Như vậy, khi một phần tử có class “option” được nhấp vào, tất cả các phần tử khác với class “option” sẽ mất class “active”, và phần tử được nhấp vào sẽ được thêm class “active”. Điều này thường được sử dụng để chỉ định phần tử nào đang được chọn hoặc có trạng thái “active” trong một tập hợp các phần tử.

 

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *


0766734539
Tổng Đài Miễn Phí Cước Gọi
Yêu cầu tư vấn