Cách sử dụng Add-on Slider

Được sử dụng để hiển thị các nội dung quan trọng, nổi bật của website như các sự kiện khuyến mãi, sản phẩm mới ra mắt,...

Lợi thế của add-on này là giúp website tiết kiệm không gian hiển thị nội dung, người dùng có thể nhanh chóng xem được nội dung nổi bật ngay khi trên website.

Lưu ý: không sử dụng hình ảnh với dung lượng và kích thước quá lớn để tránh làm chậm tốc độ tải trang. Gợi ý hình ảnh phù hợp: dung lượng không quá 10MB, kích thước chiều ngang tối đa 1920px, chiều cao auto (nên để chiều cao các hình ảnh bằng nhau để khi hiển thị trên web sẽ đẹp hơn).

Để add-on này hoạt động, bạn cần thực hiện theo các bước sau:

Bên ngoài Manage, nhấn vào mục “Slider” sau đó:

Chọn mục “Category”: nhấn nút “Add”, sau đó nhập tên vào phần “Title” sau đó nhấn “Save”

Ở mục “All Banners”: nhấn nút “Add”, sau đó nhập các thông tin cần thiết và bấm “Save” hoặc “Save & Close”:

Bên trong Visual, sau khi đã kéo thả add-on vào vùng Canvas và đặt kích thước ở phần Resize trên Toolbar, nhấn vào Addon Config (biểu tượng bánh xe bên cạnh addon):

Order By: Hiển thị hình trong cùng Category theo Id, Name (Tên), Create Date (Ngày tạo), Published Date (Ngày xuất)

Order Direction: Sắp xếp theo thứ tự Descending (giảm dần), Ascending (tăng dần) Random (ngẫu nhiên)

Heading: Chọn thẻ tiêu đề cho “Title”

Category: chọn category mong muốn

Image Height: nhập chiều kích thước giống với kích thước đã nhập ở Toolbar. (Set up px chỗ này khi các hình ảnh của slider ko cùng chiều cao, nhớ là tắt Auto Height ở dưới nha)

Loop: bật tính năng này để add-on sẽ tự động lặp lại nội dung hình ảnh sau khi đã trượt hết 1 vòng

Arrows: bật tính năng này nếu bạn muốn 2 mũi tên điều hướng hiển thị trên add-on

Dots: các chấm tròn ở vùng bên dưới của Slider, giúp người dùng dễ dàng biết có bao nhiêu hình ảnh trong add-on

Auto Play: add-on sẽ tự động trượt sau 1 khoảng thời gian

Play Timeout: thời gian để add-on tự động trượt. Ví dụ: nhập 4000, nghĩa là sau 4s thì add-on sẽ tự động trượt tiếp.

Auto Height: bật chỗ này khi các hình ảnh có cùng chiều cao, hoặc tuỳ trường hợp bạn muốn các hình ảnh show trọn nội dung không bị giới hạn px (nhớ là không set up Image Height ở trên nha)

Effects: Hiệu ứng khi chuyển qua banner tiếp theo

Audio: Dùng cho khi Slider là Video

Caption: Dùng cho khi Slider là Video

Controls: Dùng cho khi Slider là Video