Thanh trượt nội dung có thể cung cấp một cách trực quan hấp dẫn để giới thiệu nội dung độc đáo của trang web của bạn. Đây là cách sử dụng Slick Slider để tạo thanh trượt nội dung sáng tạo
Thanh trượt nội dung dường như có ở khắp mọi nơi trong thiết kế web, nhưng đó không phải là xu hướng thiết kế sẽ sớm biến mất. Thanh trượt có thể được thiết lập nhanh chóng, thêm tương tác vào trải nghiệm web của khách truy cập và có thể hiển thị nội dung trên một không gian tương đối nhỏ trên trang web.
Mặc dù thanh trượt nội dung rất tuyệt khi có, nhưng chúng cũng có thể được sử dụng một cách vụng về nếu ai đó cố gắng sử dụng chúng vì mục đích "thú vị" hoặc "hợp thời trang". Dưới đây là một số thời điểm tốt nhất để sử dụng thanh trượt nội dung trên trang web.
1] Tham quan sản phẩm
Thanh trượt lấy một lượng lớn thông tin và chia nó thành các phần có thể quản lý được. Nếu có một thành phần trong sản phẩm hoặc dịch vụ của bạn khá phức tạp, hãy sử dụng thanh trượt nội dung để sắp xếp thông tin đó theo thứ tự tuần tự hoặc theo chủ đề.
2] Quy trình từng bước
Chúng tôi vừa đề cập rằng các thanh trượt có thể được sử dụng để chia nhỏ các quy trình lớn hơn thành một thứ tự tuần tự dễ hiểu hơn. Tuy nhiên, thanh trượt cũng có thể làm nên điều kỳ diệu khi cung cấp cho mọi người nhiều chi tiết hơn thay vì ít hơn trong sự kết hợp giữa các yếu tố hình ảnh và văn bản chi tiết. Thanh trượt là một cách hoàn hảo để kể câu chuyện về sản phẩm hoặc dịch vụ của bạn từ đầu đến cuối.
3] Hiển thị các bổ sung nội dung mới nhất
Đừng để nội dung của bạn chỉ tồn tại trên blog. Làm nổi bật các bài đăng blog hoặc tin tức nổi bật mới nhất mà khách truy cập trang web của bạn có thể khám phá chúng. Thanh trượt cũng thu hút nhiều sự chú ý hơn đến nội dung được đặt ở đó nhờ tính tương tác của nó so với blog hoặc trang tin tức tĩnh.
4] Danh mục đầu tư
Thanh trượt là một trong những cách hiệu quả nhất để thể hiện danh mục đầu tư hoặc nội dung công việc -- đặc biệt nếu trang web của bạn bắt nguồn từ hình ảnh. Thanh trượt nội dung cung cấp cho khách truy cập trang web của bạn một cách để cuộn qua phần nội dung của bạn và cung cấp xác thực bổ sung rằng tổ chức của bạn thực sự biết nó đang nói về điều gì.
Đây là cách tạo thanh trượt nội dung nổi bật bằng Slick Slider.
HTML
HTML kết hợp các lớp Bootstrap và Slick Slider cần thiết để các slide khởi tạo khi tải
CSS
Cần có một lượng CSS đáng kể cho tất cả các tính năng, chẳng hạn như các mũi tên trước/tiếp theo được phủ
JavaScript
Cuối cùng, bạn chỉ cần khởi tạo slick slider trên tài liệu là xong
Và cùng với đó, bạn có một thanh trượt nội dung nổi bật có giá trị thu hút người dùng trang web của bạn và giúp hướng lưu lượng truy cập đến các trang có cấu hình cao. Bạn muốn xem hướng dẫn này có thể trông như thế nào trên trang web của bạn trước khi bạn đầu tư thời gian vào viết mã?
Đặc trưng
- Đáp ứng đầy đủ. Cân với thùng chứa của nó
- Cài đặt riêng cho mỗi điểm dừng
- Sử dụng CSS3 khi có sẵn. đầy đủ chức năng khi không
- Đã bật tính năng vuốt. Hoặc vô hiệu hóa, nếu bạn thích
- Kéo chuột máy tính để bàn
- vòng lặp vô hạn
- Truy cập đầy đủ với điều hướng phím mũi tên
- Thêm, xóa, lọc và bỏ lọc các slide
- Tự động phát, dấu chấm, mũi tên, gọi lại, v.v.
Một vật thể
$['.single-item'].slick[];
nhiều mục
$['.multiple-items'].slick[{
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
}];
Hiển thị đáp ứng
$['.responsive'].slick[{
dots: true,
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
}];
Cùng một lúc
$['.one-time'].slick[{
dots: true,
infinite: false,
speed: 300,
slidesToShow: 5,
touchMove: false,
slidesToScroll: 1
}];
Bộ không đồng đều
$['.uneven'].slick[{
slidesToShow: 4,
slidesToScroll: 4
}];
Chế độ trung tâm
$['.center'].slick[{
centerMode: true,
centerPadding: '60px',
slidesToShow: 3,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
}];
tải chậm
// To use lazy loading, set a data-lazy attribute
// on your img tags and leave off the src
$['.lazy'].slick[{
lazyLoad: 'ondemand',
slidesToShow: 3,
slidesToScroll: 1
}];
Tự chạy
$['.autoplay'].slick[{
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
}];
Phai màu
________số 8Thêm bớt
$['.add-remove'].slick[{
slidesToShow: 3,
slidesToScroll: 3
}];
var slideIndex = 1;
$['.js-add-slide'].on['click', function[]{
slideIndex++;
$['.add-remove'].slickAdd[''+slideIndex+'
'];
}];
$['.js-remove-slide'].on['click', function[]{
$['.add-remove'].slickRemove[slideIndex - 1];
if [slideIndex !== 0] {
slideIndex--;
}
}];
lọc
$['.multiple-items'].slick[{
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
}];
Hủy hoại
Nếu bạn thực sự muốn trở thành anh chàng đó
$['.multiple-items'].slick[{
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
}];
Thanh trượt dưới dạng Nav Đối với / đồng bộ hóa
$['.multiple-items'].slick[{
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
}];
RTL một mặt hàng
$['.multiple-items'].slick[{
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
}];
Nhiều mục RTL
$['.multiple-items'].slick[{
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
}];
Ghi chú. thẻ HTML hoặc cha của thanh trượt phải có thuộc tính "dir" được đặt thành "rtl"