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

admin31/12/2023 2828

Để đ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
_load_textdomain_just_in_time
admin21/11/2024 58
admin21/11/2024 41
admin20/11/2024 181
admin03/08/2024 147
admin05/05/2024 2602
admin05/05/2024 2449
admin30/04/2024 1841
admin26/03/2024 799
Chia sẻ mới nhất
_load_textdomain_just_in_time
admin21/11/2024 58
admin21/11/2024 41
admin20/11/2024 181
admin09/03/2024 2095
admin20/02/2024 878
admin19/02/2024 1560
admin18/02/2024 1468
admin01/02/2024 951
admin31/01/2024 908
admin21/01/2024 2282