Hướng dẫn cách tạo slider flatsome dạng click show hide

admin31/12/2023 3251

Để đem lại sự mới lạ và tăng trải nghiệm người dùng. Hôm nay Abweb xin chia sẻ bạn Hướng dẫn chi tiết cách tạo slider flatsome dạng click to show. Các bạn xem demo dưới đây:

Hướng dẫn tạo slider flatsome đẹp

Nếu yêu thích mẫu slider flatsome ở phía trên và bạn muốn làm nó trên website của bạn thì hãy làm các bước như dưới đây nhé!

Bước 1:

Bạn tải đoạn shortcode dưới đây chèn vào nơi bạn muốn hiển thị trên trang của bạn ở chế độ soạn thảo nhé!

 
Tải code

 

Bước 2: chép code sau vào file function của theme

function css_slider_click_to_show_abweb(){
?>
<style>.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; } }
</style>
<?php
}
add_action('wp_head','css_slider_click_to_show_abweb');

function js_slider_click_to_show_abweb(){

?>

<script>
const slider = document.querySelector('.slide-holder');
function activate(e) {
const items = document.querySelectorAll('.slide-item');
e.target.matches('.custom-next') && slider.append(items[0])
e.target.matches('.custom-prev') && slider.prepend(items[items.length-1]);
}
document.addEventListener('click',activate,false);
</script>

<?php

}

add_action('wp_footer','css_slider_click_to_show_abweb');

Sau đó bạn vào trang bạn vừa chèn chọn sửa ở chế độ chỉnh sửa ux builder để thay hình là sẽ được slider như demo mình hướng dẫn.

Nếu đọc hướng dẫn trên mà vẫn chưa làm được bạn có thể theo dõi video dưới đây hoặc liên hệ trực tiếp mình sẽ hỗ trợ bạn nhé!

 

Hỏi đáp

Bài viết mới nhất
admin20/05/2025 35
admin15/05/2025 41
admin13/05/2025 43
admin03/05/2025 190
admin03/05/2025 64
admin12/02/2025 404
admin11/02/2025 226
admin04/02/2025 242
Chia sẻ mới nhất
admin15/05/2025 41
admin13/05/2025 43
admin03/05/2025 190
admin03/05/2025 64
admin12/02/2025 404
admin11/02/2025 226
admin09/12/2024 359
_load_textdomain_just_in_time
admin21/11/2024 691
admin21/11/2024 497
admin20/11/2024 626