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 https://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: ["

Trong bài này, chúng ta sẽ tìm hiểu về 2 component khác của Bootstrap và card và carousel, cách tạo slideshow trong Bootstrap. Đồng thời, các kiến thức về lưới Bootstrap và button cũng được sử dụng trong bài học này.

Video – Card và Carousel – Tạo slideshow trong Bootstrap

Video sử dụng tài liệu tham khảo từ getboostrap.com

"Thăm ngàn, kẹp ngần nhưng vẫn không đủ chai ni (trả nợ)" nên dành vài dòng cho QUẢNG CÁO Các bạn cần hosting PHP - WordPress nhanh, rẻ và dễ sử dụng có thể chọn Azdigi nhé. Link đăng ký: NHẬN NGAY ƯU ĐÃI Nếu các bạn đăng ký hosting từ link quảng cáo, mình sẽ có một ít tiền để duy trì và "chai ni".

Hướng dẫn chi tiết

Card

Card là một khối nội dung đã được định dạng sẵn, bao gồm các thành phần nhỏ bên trong, giúp tiết kiệm thời gian canh chỉnh các khối.

Card trong Bootstrap

Cách sử dụng card:

Có làm thì mới có ăn như ai đó từng nói - Vài dòng ngắn cho QUẢNG CÁO nhé Các bạn cần hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé. Link đăng ký: NHẬN NGAY ƯU ĐÃI Nếu các bạn đăng ký và sử dụng hosting từ link trên, Góc Làm Web sẽ có một ít tiền để duy trì.

Khối div card gồm có các thành phần bên trong:

+ Hình ảnh class=”card-img-top”. Nếu các bạn muốn hình có padding, sử dụng thêm class=”img-thumbnail”

+ Phần nội dung chính nằm trong khối class=”card-body”

+ Tiêu đề dùng class=”card-title”

+ Nội dung dùng class=”card-text”

độ rộng của khối có thể chỉnh bằng cách tăng/giảm thuộc tính style=”width: 18rem;”

Carousel – tạo slideshow trình chiếu

Cách dùng: để trong 1 khối row khác để tách biệt với các phần khác

banner là class mình tự định dạng. Tùy ý các bạn chỉnh lại nhé.

.banner{ width: 100%; height: 450px; overflow: hidden; // tránh lỗi hình quá lớn đè lên nội dung các phần khác padding-left: 15px; box-sizing: border-box; // cố định kích thước của slide }

Button group và Button toolbar

Ngoài ra, đầu video, mình cũng hướng dẫn về button group

Dùng khối để class=”btn-group” để gom các button bên trong lại với nhau. Nếu không có khối đó bao ngoài, các button sẽ tách rời nhau.

Button toolbar là tập hợp nhiều button group lại với nhau bằng cách dùng class=”btn-toolbar” và thêm vào mỗi group class mr-2.

Đó là tất cả nội dung của bài này.

Code mẫu: Download

Nếu có thắc mắc, hãy đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.

Liên hệ