Cách tạo slider chạy siêu mượt trên flatsome

Cách tạo slider chạy siêu mượt trên flatsome. Bạn đã từng tạo slider trên Flatsome và gặp phải tình trạng giật giật khi chạy? Bài viết này sẽ hướng dẫn bạn cách tạo Slider chạy siêu mượt trên Flatsome.

Cách tạo slider chạy siêu mượt trên flatsome

Để tạo được slider như bạn vừa thấy ở trên, bạn cần trải qua 2 bước sau:

1. Tạo row slider và chèn hình slider cần chạy trong chế độ UX Builder của Flatsome
2. Copy và paste code JS và CSS vào file function của bạn

Xem thêm: 

1. Code thu gọn nội dung chi tiết sản phẩm và danh mục trên Flatsome
2. Code hiển thị khuyến mãi đẹp cho flatsome giống như Cellphones
3. Chia sẻ code bài viết liên quan đẹp cho Flatsome

Bước 1: Tạo row slider và chèn hình slider

Sử dụng element row trong UX Builder và chọn số col tùy ý. Sau đó, thêm đoạn class slider-chay-muot slider row-slider large-columns-4 xlarge-columns-4 để tạo slider chạy mượt. Bạn có thể tuỳ chỉnh số cột hiển thị bằng cách thay đổi số trong class này.

Video hướng dẫn tạo slider chạy siêu mượt



Bước 2: Copy và paste code JS và CSS vào file function

Copy đoạn code JS và CSS sau và paste vào file function trong phần Giao diện > Theme file editer > chọn file function.php của bạn.

function chen_js_slider_chay_muot_abweb() {
<script type="text/javascript" src="https://unpkg.com/flickity@2.2.1/dist/flickity.pkgd.min.js" id="wp-hooks-js"></script>
<script>
let tocdo=2; // Tốc độ di chuyển của slider
let flickity_chay=null; // Biến để lưu đối tượng Flickity
let trang_thai_dung_lai=false; // Trạng thái dừng lại của slider
const class_slider_chay=document.querySelector('.slider-chay-muot'); // Lấy đối tượng slider từ DOM
if(class_slider_chay){ // Kiểm tra xem slider có tồn tại không
const cap_nhat_slider=()=>{ // Hàm cập nhật slider
if(trang_thai_dung_lai) return; // Nếu đang dừng lại, không cập nhật
if(flickity_chay.slides){ // Nếu có slide
flickity_chay.x=(flickity_chay.x-tocdo)%flickity_chay.slideableWidth;
flickity_chay.selectedIndex=flickity_chay.dragEndRestingSelect();
flickity_chay.updateSelectedSlide();
flickity_chay.settle(flickity_chay.x);
}
window.requestAnimationFrame(cap_nhat_slider); // Yêu cầu cập nhật tiếp theo
};
const dung_lai=()=>{trang_thai_dung_lai=true;}; // Đặt trạng thái dừng lại
const play=()=>{ // Hàm phát lại slider
if(trang_thai_dung_lai){
trang_thai_dung_lai=false; // Bắt đầu lại nếu đang dừng
window.requestAnimationFrame(cap_nhat_slider); // Yêu cầu cập nhật
}
};
flickity_chay=new Flickity(class_slider_chay,{ // Khởi tạo Flickity với các tùy chọn
autoPlay:false,
prevNextButtons:true,
pageDots:false,
draggable:true,
wrapAround:true,
selectedAttraction:0.015,
friction:0.25
});
flickity_chay.x=0; // Đặt vị trí ban đầu
class_slider_chay.addEventListener('mouseenter',dung_lai,false); // Dừng lại khi chuột vào
class_slider_chay.addEventListener('focusin',dung_lai,false); // Dừng lại khi lấy nét
class_slider_chay.addEventListener('mouseleave',play,false); // Phát lại khi chuột ra ngoài
class_slider_chay.addEventListener('focusout',play,false); // Phát lại khi mất nét
flickity_chay.on('dragStart',()=>{trang_thai_dung_lai=true;}); // Dừng lại khi bắt đầu kéo
cap_nhat_slider(); // Bắt đầu cập nhật slider
}
</script>
}
add_action('wp_footer','chen_js_slider_chay_muot_abweb');

Tóm tắt chức năng:

• Tạo slider: Sử dụng thư viện Flickity để tạo một slider với các tính năng như di chuyển tự động, nút điều hướng và có thể kéo.
• Tốc độ di chuyển: Slider sẽ tự động di chuyển với tốc độ được xác định bởi biến tocdo. Bạn có thể tăng hoặc giảm thông số để nó có thể di chuyển nhanh hoặc chậm tuỳ theo sở thích của mình
• Dừng và phát lại: Khi người dùng di chuột vào slider, nó sẽ dừng lại và sẽ phát lại khi người dùng di chuột ra ngoài.
• Sự kiện: Các sự kiện như mouseenter, mouseleave, focusin, và focusout được sử dụng để kiểm soát trạng thái dừng và phát lại của slider.

Đoạn code này được gắn vào phần chân của trang WordPress thông qua hàm add_action.

Nguồn: Bác Lân

Kết luận

Với cách tạo slider trên Flatsome chạy siêu mượt này bạn sẽ có ngay một trình chiếu ảnh vô cùng mượt mà. Đổi mới giao diện website của bạn và tạo ấn tượng mạnh mẽ với slider này!

Nếu bạn đang đang là nhà bán hàng mà muốn tăng đơn hàng nhanh chóng hãy liên hệ với 5SMedia chúng tôi. Với dịch vụ quảng cáo Google, quảng cáo Facebook, Quảng cáo tiktok tiếp cận đến người đúng nhu cầu. Chúng tôi cam kết đơn hàng của bạn ra bán như vũ bão.

Với mức chi phí quảng cáo Google, quảng cáo Facebook cực kỳ ưu đãi chỉ từ 5%. Các bạn sẽ được gặp chuyên gia tư vấn 24/7, hỗ trợ thiết  kế hình ảnh, lên kịch bản, chiến lược để chạy quảng cáo