Chào các bạn, hôm nay tôi giới thiệu bạn Plugin làm sider cho website cực kỳ dễ sử dụng và đa chức năng chính là Owl Carousel Slider
Đây là một Plugin viết trên thư viện Jquery với nhiều tùy chọn giúp chúng ta có thể lựa chọn phù hợp với nhu cầu một cách dễ dàng. Sau đây chúng ta cùng tham quanOwl Carousel nhé.
Đang xem: Hướng dẫn sử dụng owl carousel slider
Trang chủ Owl Carousel
Biểu diễn các demo của Owl Carousel
Thích hợp với slider hình ảnh
Kiểu slider thường dùng trong khi list sản phẩm
Kiểu slider thường dùng cho Slider chính của web
Trên là một số loại slider nổi bật của Owl Carousel tiếp theo chúng ta nghiên cứu cách thêm vào website
Download:https://goo.gl/NQdkc7
Sau khi download xong bạn cho vào xampp chạy ở dạng server để xem dầy đủ bản hướng dẫn của Owl Coursel
Các bước cài đặt
B1: Import js và Css của Plugin
Đây là một plugin đã được viết sẳn nên để sử dụng nó bạn cần import nó vào website của mình trước khi dùng
Bước 2:Thiết lập cấu trúc HTML
Plugin được tạo sẳn và tất nhiên là cấu trúc html cũng cần tuần theo quy định của Plugins Owl Carousel
Your Content
Your Content
Bước 3: Thiết lập gọi sử dụng Plugin
Bước này là bước cuối cùng để thêm Slider Owl vào website.
Xem thêm: Chủ Hộ Gia Đình Tiếng Anh Là Gì, Hộ Gia Đình In English
Ở bước này dùng khai báo đối tượng nào được áp dụng Owl caroursel
$(document).ready(function() { $(“#owl-example”).owlCarousel();});Chú ý: Nếu website có nhiều Slider chúng ta khai báo mỗi Slider có id khác nhau và áp dụng riêng cho từng cái.
Xem thêm: Lý Tưởng Sống Là Gì ? Bàn Về Lý Tưởng Thanh Niên Việt Ngày Nay
Ngoài ra để sử dụng tiện lợi Owl Coursel cũng cấp rất nhiều options cho chúng ta lựa chọn để xây dựng Slider thích hợp. (Bạn xem rõ hơn ở bản giới thiệu demo)
Tổng kết:
Vậy là tôi đã hướng giới thiệu các bạn review qua owl carousel để làm việc được dễ dàng nhất bạn chú ý các bước
1. Download
2. Đọc Document(hướng dẫn)
3. Áp dụng
Nếu bạn thấy khó khăn trong bất kỳ bước nào. Vui lòng comment ngày dưới bài để trao đổi. Đừng để mất thời gian vào việc tự kỹ trong mớ hỗn độn bạn nhé.