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

admin31/12/2023 241

Để đ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
admin05/05/2024 133
admin05/05/2024 85
admin30/04/2024 126
admin26/03/2024 201
admin09/03/2024 569
admin20/02/2024 267
admin19/02/2024 657
admin18/02/2024 570
Chia sẻ mới nhất
admin09/03/2024 569
admin20/02/2024 267
admin19/02/2024 657
admin18/02/2024 570
admin01/02/2024 333
admin31/01/2024 275
admin21/01/2024 278
admin21/01/2024 333
admin18/01/2024 331
admin16/01/2024 270