Sử dụng Splide slider cho website: Tất cả những gì bạn cần biết
Splide là một thư viện slider JavaScript miễn phí, dễ sử dụng và tùy chỉnh. Nó cung cấp cho người dùng một số tùy chọn để tùy chỉnh hiệu ứng, chuyển động, hình thức, v.v. Trong bài viết này, tôi sẽ cung cấp cho bạn hướng dẫn sử dụng Splide Slider trong HTML và JavaScript.
Bước 1: Tải và đưa Splide vào trang web của bạn
Bạn có thể tải Splide từ trang web chính thức của nó tại địa chỉ https://splidejs.com/. Sau khi tải xuống, hãy đưa file CSS và JS của Splide vào trang web của bạn. Ví dụ:
Bước 2: Tạo HTML cho Splide Slider
Sau khi đưa Splide vào trang web, bạn cần tạo HTML cho Splide Slider. Cấu trúc HTML cơ bản của Splide Slider bao gồm một thẻ div chứa một hoặc nhiều thẻ ul với các phần tử li bên trong. Ví dụ:
Trong đó, splide là tên của slider, splide__track là phần chứa nội dung slider, splide__list là danh sách các slide và splide__slide là các phần tử slide. Bạn có thể tùy chỉnh các tên này nếu muốn.
Bước 3: Khởi tạo Splide Slider
Sau khi tạo HTML cho Splide Slider, bạn cần khởi tạo Splide Slider bằng JavaScript. Đầu tiên, bạn cần tạo một đối tượng Splide với các tùy chọn của mình. Ví dụ:
document.addEventListener( 'DOMContentLoaded', function () {
new Splide( '.splide', {
type: 'loop',
perPage: 2,
rewind: true,
autoplay: true,
interval: 3000,
pauseOnHover: false,
arrows: true,
pagination: false,
keyboard: true,
} ).mount();
} );
Trong đó, splide là tên của slider, type là loại slider (loop hoặc slide), perPage là số slide hiển thị trong mỗi lần trượt, rewind là chế độ tua lại slide,
autoplay là chế độ tự động trượt slide, interval là khoảng thời gian giữa các lần trượt slide (tính bằng mili giây), pauseOnHover là chế độ tạm dừng khi di chuột qua slide, arrows là chế độ hiển thị mũi tên điều khiển, pagination là chế độ hiển thị phân trang và keyboard là chế độ điều khiển bằng bàn phím.
Sau khi tạo đối tượng Splide, bạn cần gọi phương thức mount() để khởi tạo và chạy Splide Slider.
Bước 4: Tùy chỉnh Splide Slider
Bạn có thể tùy chỉnh hiệu ứng, chuyển động, hình thức, v.v. của Splide Slider bằng cách sử dụng các tùy chọn trong đối tượng Splide. Ví dụ:
new Splide( '.splide', {
type: 'fade',
speed: 1000,
easing: 'cubic-bezier(0.5, 0, 0.5, 1)',
arrows: false,
pagination: true,
classes: {
arrows: 'splide__arrows',
arrow: 'splide__arrow',
prev: 'splide__arrow--prev',
next: 'splide__arrow--next',
},
height: '500px',
width: '80%',
} ).mount();
Trong đó, type là loại hiệu ứng (slide hoặc fade), speed là tốc độ chuyển động, easing là hàm điều chỉnh chuyển động, arrows là chế độ hiển thị mũi tên điều khiển, pagination là chế độ hiển thị phân trang, classes là danh sách các lớp CSS tùy chỉnh, height là chiều cao của slider và width là chiều rộng của slider.
Bạn có thể tùy chỉnh các tùy chọn này để đạt được hiệu quả tốt nhất cho Splide Slider của mình.
Vậy là bạn đã biết cách sử dụng Splide Slider trong HTML và JavaScript. Hy vọng hướng dẫn này sẽ giúp bạn tạo ra các slider đẹp và chuyên nghiệp cho trang web của mình.
