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

admin31/12/2023 134

Để đ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/02/2024 30
admin19/02/2024 285
admin18/02/2024 267
admin01/02/2024 61
admin31/01/2024 58
admin28/01/2024 73
admin21/01/2024 64
admin21/01/2024 66
Chia sẻ mới nhất
admin20/02/2024 30
admin19/02/2024 285
admin18/02/2024 267
admin01/02/2024 61
admin31/01/2024 58
admin21/01/2024 66
admin21/01/2024 65
admin18/01/2024 98
admin16/01/2024 77
admin02/01/2024 97