By Giới thiệu
Hôm này mình sẽ giới thiệu đến các bạn một mã nguồn mở tên là Owl Carousel để làm slideshow cực kì đẹp mắt và chuyên nghiệp, cách sử dụng cũng cực kỳ đơn giản, còn có thể tùy biến tùy theo ý của các bạn.
Bài viết này sẽ hướng dẫn các bạn cách cài đặt và sử dụng mã nguồn mở “Ngon lành” này.
Cài đặt
Bước 1: Tải source về tại đây
Bước 2: Giải nén source và vào thư mục dist để copy file JS và CSS
Trong thư mục dist sẽ có 2 file js các bạn copy 2 file này nhé.
Còn các file css thì sẽ nằm trong thư mục assets như hình trên. Copy hết tất cả các file trong thư mục này về luôn nhé.
Sau khi copy qua source của mình thì ta sẽ được như sau:
Các file *css sẽ nằm trong thư mục css và các file *js sẽ nằm trong thư mục js
file index.html sẽ là file chúng ta sẽ code phần slideshow và phần thư mục images sẽ dùng để chứa hình ảnh của slide
Bước 3: Trong file html các bạn nhúng các file css và js của Owl Carousel vào.
Lưu ý: Phải có thư viện jQuery nằm ở đầu các *js khác nhé.
Hướng dẫn
Code HTML
Để sử dụng các bạn chỉ cần code như sau:
<div id="slider">
<div class="owl-carousel owl-theme">
<div class="item">{CODE_SLIDE_1}</div>
<div class="item">{CODE_SLIDE_2}</div>
<div class="item">{CODE_SLIDE_3}</div>
<div class="item">{CODE_SLIDE_4}</div>
<div class="item">{CODE_SLIDE_5}</div>
</div>
</div>Các bạn nên cho một thẻ <div id="slider"></div> với id tùy ý vào bao lấy codeowl-carousel, mục đích là sau này nếu có 2 hoặc 3 slideshow trong 1 trang thì các bạn có thể gọi đến id của từng thằng mà xử lý. Mình khuyến cáo các bạn nên code với id của slider nếu không sau này có là “cay” lắm đấy.
Code JS
Để chạy được slideshow thì các bạn phải có đoạn js này nhé. Các bạn có thể tạo 1 file js đặt tên tùy ý rồi nhúng vào HTML (chú ý là nhúng vào bên dưới js thư viện jQuery và OwlCarousel)
$(document).ready(function() {
$('#slider .owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
items: 1
})
});Thế là xong bây giờ các bạn ra xem thành quả nhé. Nhưng như vậy vẫn chưa đủ đâu các bạn phải xem thêm các thuộc tính của OwlCarousel để có thể tùy chỉnh trên cái slider này của mình.
Tùy chỉnh
Các bạn có thể xem thêm các tùy chỉnh tại đây. Dưới đây mình sẽ chỉ hướng dẫn một số tùy chỉnh cần thiết thôi nha.
Thay đổi icon nút qua trái, qua phải
Để thay đổi icon nav các bạn chỉ cần thêm thuộc tính nextText và làm như sau:
$('#slider .owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
navText: ["<img src='prev.png'>","<img src='next.png'>"],
items: 1
})Responsive slide
Để responsive trên slider các bạn sử dụng thuộc tính responsive
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
})Đoạn code trên bên trong thuộc tính responsive có nghĩa như sau:
- 1000: {items:5} nghĩa là màn hình trên 1000px sẽ hiển thị 5 item trên 1 slide
- Tương tự 600:{items:3} thì màn hình trên 600px sẽ hiển thị 3 item trên 1 slide
Tắt mũi tên chuyển slide qua trái, phải
Để tắt mũi tên chuyển slide thì các bạn set thuộc tính nav:false
Tắt nút chuyển slide
Để tắt mũi tên chuyển slide thì các bạn set thuộc tính dots:false
Không lặp lại slide
Để không quay lại slide ban đầu thì các bạn set thuộc tính loop:false
Tư động dừng khi rê chuột vào slide
Để sử dụng chức năng này thì các bạn thêm thuộc tính autoplayHoverPause:true sửa thành false nếu không muốn.
Tự động chuyển slide và thời gian chuyển slide
Để tự động chuyển slide các bạn dùng thuộc tính autoplay:true, và set thời gian chuyển slide bằng thuộc tính autoplayTimeout:1000 với 1000 là bằng 1s
Ngoài ra, các bạn có thể xem cách cài đặt tại trang gốc hoặc xem các demo khác nhau ở đây .
Kết luận
Khi thiết kế website chắc chắn các bạn sẽ cần đến slideshow, để ngồi code cả đống code cho slideshow thì chắc cũng mất đến cả buổi, vì vậy việc sử dụng open source là thứ cần thiết để tiết kiệm thời gian và công sức của các bạn. Cùng với open source Owl Carousel đầy đủ tính năng và dễ dàng tùy biến này thì còn ngại gì vài cái slideshow…
Để tùy biến layout của slide thì các bạn buộc phải phân tích code của slide sau đó sử dụng CSS để tùy chỉnh thêm nhé.
Comments