Làm thế nào để có công việc lập trình web chỉ sau 90 ngày học tại nhà? BẤM VÀO ĐÂY XEM MIỄN PHÍ

Download và hướng dẫn sử dụng owl carousel Slider

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 quan Owl Carousel nhé.

 

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

<!-- Important Owl stylesheet -->
<link rel="stylesheet" href="owl-carousel/owl.carousel.css">
 
<!-- Default Theme -->
<link rel="stylesheet" href="owl-carousel/owl.theme.css">
 
<!--  jQuery 1.7+  -->
<script src="jquery-1.9.1.min.js"></script>
 
<!-- Include js plugin -->
<script src="assets/owl-carousel/owl.carousel.js"></script>

 

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

<div id="owl-example" class="owl-carousel">
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  ...
</div>

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. 

Ở 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. 

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é. 

Chúc các bạn áp dụng tốt!

Url Link

http://hocweb123.com/download-va-huong-dan-su-dung-owl-carousel-slider.html

Tìm kiếm liên quan

Download và hướng dẫn sử dụng owl carousel Slider