Cách dựng carousel

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ề trên trang //owlcarousel2.github.io

Bước 2: Giải nén source và vào thư mục dist để copy file JS và CSS

Thư mục dist khi giải nén source Owl Carousel

Trong thư mục dist sẽ có 2 file js các bạn copy 2 file này nhé.

File js trong thư mục dist

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

File css trong thư mục asset

Sau khi copy qua source của mình thì ta sẽ được như sau:

CSS và JS của Owl Carousel sau khi copy sang thư mục của mình

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

Kết quả sau khi nhúng file js và css vào html

Hướng dẫn

Code HTML

Để sử dụng các bạn chỉ cần code như sau:

Các bạn nên cho một thẻ

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: ["Go somewhere