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:
- Tạo row slider và chèn hình slider cần chạy trong chế độ UX Builder của Flatsome
- Copy và paste code JS và CSS vào file function của bạn
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 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.
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;
let flickity_chay = null;
let trang_thai_dung_lai = false;
const class_slider_chay = document.querySelector('.slider-chay-muot');
if (class_slider_chay) {
const cap_nhat_slider = () => {
if (trang_thai_dung_lai) return;
if (flickity_chay.slides) {
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);
};
const dung_lai = () => {
trang_thai_dung_lai = true;
};
const play = () => {
if (trang_thai_dung_lai) {
trang_thai_dung_lai = false;
window.requestAnimationFrame(cap_nhat_slider);
}
};
flickity_chay = new Flickity(class_slider_chay, {
autoPlay: false,
prevNextButtons: true,
pageDots: false,
draggable: true,
wrapAround: true,
selectedAttraction: 0.015,
friction: 0.25
});
flickity_chay.x = 0;
class_slider_chay.addEventListener('mouseenter', dung_lai, false);
class_slider_chay.addEventListener('focusin', dung_lai, false);
class_slider_chay.addEventListener('mouseleave', play, false);
class_slider_chay.addEventListener('focusout', play, false);
flickity_chay.on('dragStart', () => {
trang_thai_dung_lai = true;
});
cap_nhat_slider();
}
</script>
}
add_action('wp_footer', 'chen_js_slider_chay_muot_abweb');
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
Địa chỉ: 05 Thành Thái, Phường 14, Quận 10, TP Hồ Chí Minh
Hotline: 0965 165 166 hoặc 09 3333 2765
Fanpage: https://fb.com/5SMedia.net
Tiktok: https://tiktok.com/@5SMedia.net
Twitter: https://twitter.com/5SMedianet
Youtube: https://youtube.com/@5SMedianet
Email: info5smedia.net@gmail.com