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

admin31/12/2023 3185

Để đ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

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

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

Login

Register