Make slider clickable(Links into slider)
Hướng dẫn gắn link cho slider
Last updated
Hướng dẫn gắn link cho slider
Last updated
Khi khách muốn add links vào những slider để sau khi click vào phần ảnh background, page sẽ điều hướng sang 1 page mới
Phương pháp này chỉ nên áp dụng trên các slider section và không khuyến khích sử dụng trên các section khác(nếu chưa thực sự nắm rõ cách hoạt động của code)
Để tạo được link cho một slider, ta cần tạo một lớp phủ tag: <a></a> - được gắn link với thuộc tính trong suốt và cover toàn bộ view back-ground(xem phần css bên dưới):
Sau khi gắn link cho từng slider, ở ví dụ dưới đây là "Button for image" box - sẽ cho phép người dùng được add link trực tiếp cho background sau khi nhấn vào "Link settings":
Vòng lặp cho slider thường được khai báo bởi cú pháp @for - @endfor trong editor code
Giai đoạn này sẽ có 3 phần cần chú ý:
Phần code css tùy chỉnh cho lớp phủ <a></a> tag
Phần code setting
Phần render thông tin của code ra giao diện người dùng
Phần code này nên được thêm vào ở vị trí cùng cấp với các element block khác của slider(và phải nằm trong thẻ cha item slider), ví dụ:
Xác định params cho slider và thêm setting(ở ví dụ này là cho "slider.button1" được gọi ra phần giao diện bên trên):
Phần Css tùy chỉnh mẫu sẽ có dạng như sau:
Sau khi hoàn thành các quy trình trên, supporter cần phải tự add link và kiểm tra trên live page, thử click trên các phần tử khác trên slider(title, button...) xem có vấn đề gì xảy ra không rồi mới tick done issue.
Trên đây là toàn bộ quy trình custom link cho background slider, nếu có vấn đề gì cần biết, hãy liên hệ với đồng đội để nhờ sự trợ giúp và giải đáp.
Nếu vẫn chưa thực sự hiểu phương thức hoạt động của phương pháp trên, đừng vội nản chí, hãy tìm hiểu thêm và quay lại khi đã sẵn sàng!
