Hướng dẫn tạo Slider chạy mượt như Marquee trên flatsome

admin23/12/2023 1421

Bạn đang muốn tạo Slider chạy mượt như Marquee trên flatsome giống với slider bên dưới ? Bài viết sau sẽ giúp bạn thực hiện việc này rất dễ dàng chỉ với thao tác copy và pass!

One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten

Chi tiết các bước để tạo slider ticker mượt như marquee chạy từ phải sang trái

Để làm được slider như bạn vừa thấy ở trên thì bạn cần phải trải qua 2 bước, Abweb xin tóm lược để bạn dễ hình dung như sau:

  • Tạo row slider và chèn hình slider cần chạy trong chế độ ux builder
  • Copy và pass code js và css vào file function của bạn

Tạo row slider và chèn hình slider cần chạy trong chế độ ux builder

Bạn dùng element row trong ux bulder với col chọn tùy ý, trong ví dụ này Nguyễn Lân chọn col 12 tức là 1 col.

 

Sau đó tại mục class bạn điền: class : slider-chay-muot slider row-slider large-columns-4 xlarge-columns-4

Nếu để ý bạn sẽ thấy có large-columns-4 xlarge-columns-4 sở dĩ số 4 là vì mình đang muốn slider này show 4 cột chạy, nếu bạn muốn 3 cột hay 5 cột chạy thì bạn sửa nó thành 3 , 5 hay số tùy theo ý tưởng thiết kế của bạn.

Sau khi tạo row xong thì bạn tiến hành add các element tùy theo ý của bạn nhé.

Copy và pass code js và css vào file function của bạn

Bạn copy đoạn code sau vào file function và hưởng thành quả nhé!

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>
<?php
}

add_action('wp_footer','chen_js_slider_chay_muot_abweb');

Như vậy là đã tạo được slider flatsome chạy mượt như marquee rồi nhé!

Bạn có thể xem video mình quay lại quá trình để xem kỹ hơn!

Nếu Bạn thấy bài viết có giá trị và muốn mời mình ly cafe thì Bạn chuyển vào momo: 0988 569 505 (Phạm thị Soi) (Có nhiều anh em sẽ hỏi là tại sao mình tên Lân mà Momo lại tên Soi? Mình giải thích luôn nhé! Soi là tên người yêu cũ của mình :D, hiện nay lên chức vợ ). Hoặc Dona qua paypal: nguyenlanninhbinh@gmail.com

Nếu đã đọc rất kỹ bài nhưng không làm được thì add zalo số 0988 569 505 mình utraview support bạn trong 2 phút là xong.

 

Click vào Comment nhanh ở dưới để chia sẻ suy nghĩ của Bạn.
Tôi đã làm theo hướng dẫn slider chạy từ trái qua phải vi diệu quáCảm ơn bạn đã chia sẻ slider flickty hay quáBài viết slider flatsome Tôi thấy rất tuyệtCảm ơn bạn đã chia sẻ slider flatsome chi tiết quá
Hỏi đáp

Bài viết mới nhất
admin20/02/2024 30
admin19/02/2024 285
admin18/02/2024 266
admin01/02/2024 60
admin31/01/2024 57
admin28/01/2024 72
admin21/01/2024 64
admin21/01/2024 65
Chia sẻ mới nhất
admin20/02/2024 30
admin19/02/2024 285
admin18/02/2024 266
admin01/02/2024 60
admin31/01/2024 57
admin21/01/2024 65
admin21/01/2024 64
admin18/01/2024 97
admin16/01/2024 77
admin02/01/2024 96