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.
Tạo Slider Chạy Siêu Mượt
Để 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!