Carousel

Tính năng Carousel cho phép bạn tạo hiệu ứng chạy xoay vòng cho các phần tử để hiển thị dưới dạng slide hoặc danh sách sản phẩm.

Truy cập mục xem thêm trên thanh công cụ nhanh → chọn Carousel.

Hoặc bạn vào mục Thêm mới → Phần tử → Carousel để chọn sử dụng tính năng này.

1. Tự động chạy và kiểu chạy

Bạn có thể bật chế độ tự động chạy và kiểu tự động chạy để lặp lại item như thế nào, cũng như thời gian chạy của từng slide (tính bằng giây), nếu slide của bạn có nội dung dài, bạn nên để thời gian chạy lớn.

Lưu ý: nếu bạn bật tự động chạy, sau đó bấm vào icon chuyển tiếp slide của carousel thì chế độ tự động chạy sẽ tự động mất, và bạn cần tiếp tục sử dụng icon chuyển tiếp silde.

Bạn xem kích thước toàn carousel tại đây:

Kích thước chiều rộng item tại đây:

Để hiển thị đẹp đúng số lượng slide trong 1 lần chuyển tiếp slide, bạn điều chỉnh kích thước khung Carousel theo công thức: Chiều rộng khung Carousel = (Chiều rộng item × Số lượng Carousel item muốn hiển thị) + Tổng khoảng cách giữa các item.

Ví dụ: khung Carousel là 960px, bạn muốn để 2 khung slide 1 lần chuyển slide bạn có thể để: chiều rộng item 475px và khoảng cách item 15px.

Bật: khi bạn bật tính năng này, thì các carousel items sẽ giống hệt nhau về phần màu sắc/ảnh nền, bố cục thiết kế cũng như các hiệu ứng sử dụng.

Tắt: khi bạn tắt tính năng này thì các carousel items sẽ thiết kế hoàn toàn độc lập với nhau.

Lưu ý:

• Với chế độ Repeater, khi sử dụng các phần tử: nhóm nút bấm, form, carousel, collection list, tabs, table, survey, accordion, countdown, notify, spin lucky, review, group, product list, cart button sẽ hiển thị độc lập ở carousel_items sử dụng phần tử, không hiển thị repeat ở tất cả các carousel_items.
• Chỉ có thể bật lại tính năng Repeater khi Carousel chỉ còn 1 Carousel Item.

4. Biểu tượng (Mũi tên)

Indicators dots: nếu bạn muốn có các biểu tượng hiển thị chuyển slide của carousel, bạn sử dụng Indicators dots.

Kích thước, màu sắc, vị trí của Indicators dots là mặc định, không tùy chỉnh được. Trong trường hợp bạn muốn tùy biến, bạn có thể sử dụng icon, nút bấm,... và đi sự kiện chuyển tab, chi tiết sự kiện chuyển tab tại đây.

Biểu tượng (chuyển slide): Bạn có thể thay đổi màu sắc và biểu tượng này, vị trí và kích thước là mặc định, không tùy chỉnh được.

Để chỉnh sửa nội dung/thêm mới item cho carousel, bạn cần bấm vào Chỉnh sửa:

Để thêm item, bạn bấm chỉnh sửa carousel, vào thiết lập để thêm trong danh sách item:

Bạn có thể thêm các phần tử text, hình ảnh, hình hộp,.... vào trong carousel. Sau khi thêm nội dung cho carousel, bạn bấm Xong để hoàn thiện Carousel.