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
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis sapien euismod, dapibus erat sed, accumsan ipsum. Quisque laoreet, nisi at ultricies luctus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis sapien euismod, dapibus erat sed, accumsan ipsum. Quisque laoreet, nisi at ultricies luctus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis sapien euismod, dapibus erat sed, accumsan ipsum. Quisque laoreet, nisi at ultricies luctus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis sapien euismod, dapibus erat sed, accumsan ipsum. Quisque laoreet, nisi at ultricies luctus.
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
/** Custom Slide **/
.options {
display: flex;
flex-direction: row;
align-items: stretch;
overflow: hidden;
width: calc(100% - 100px);
}
.options .option {
position: relative;
overflow: hidden;
min-width: 50px;
margin: 0 10px;
padding: 0;
background-size: 120%;
cursor: pointer;
transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
border: 1px solid rgba(246, 243, 229, 0.1);
}
.option .fill {
height: 102%;
}
.options .option:not(.active) {
flex-grow: 1;
border-radius: 30px;
}
.options .option.active {
flex-grow: 10000;
transform: scale(1);
max-width: 800px;
margin: 0px;
border-radius: 40px;
background-size: auto 100%;
}
.options .option.active .overlay {
background: linear-gradient(0deg, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0) 70%);
}
.res-text {
font-size: inherit !important;
}
.option .label {
height: 150px !important;
}
.option.active .info {
opacity: 1;
transition: all 0.5s ease;
transition-delay: 0.4s;
}
.option:not(.active) .info {
opacity: 0;
transition: all 0s ease;
transition-delay: 0s;
}
.option .icon,
.option .img-inner,
.option img {
width: 99px !important;
}
@media screen and (max-width: 600px) {
.options {
width: calc(100% - 10px);
}
.options .option {
transition: max-height 0.5s ease;
}
.options .option.active {
max-height: 900px;
transition: max-height 0.5s ease;
}
.options .option:not(.active) {
max-height: 150px;
transition: max-height 0.5s ease;
}
.options .option:not(.active) .icon img {
max-height: 100px;
width: auto !important;
}
.options .option:not(.active) .icon::after {
content: "25bc";
color: #fff;
}
}
Đ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;và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 (
activeclass), 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
<script>
jQuery(function(){
jQuery(".option").click(function(){
jQuery(".option").removeClass("active");
jQuery(this).addClass("active");
});
});
</script>
Đ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ủajQuery(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 quajQuery(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ử.