Tạo hiệu ứng chuyển đổi phần tử với Owl Carousel 2

Demo: Khách hàng nói về chúng tôi tại WebSeo247

Owl Carousel 2
Owl Carousel 2

Khi làm việc với Bootstrap, bạn có để ý có mục Carousel không? Hay khi ta tìm kiếm từ khóa này trên Google nó cũng cho ra khá nhiều kết quả. Vậy Carousel là gì và lợi ích nó đem lại trong thiết kế website ra sao thì hãy cùng mình tìm hiểu ở bài viết này nhé.

Carousel là gì?

Carousel là một plugin của jQuery giúp chuyển đổi bất kỳ phần tử HTML nào thành dạng lặp quay vòng. Bạn có thể hiểu nôm na ví dụ như việc chuyển đổi ảnh (như slider) hay bất kì thứ gì bạn muốn. Để hình dung rõ hơn thì bạn truy cập WebSeo247 và kéo xuống phần Khách hàng nói về chúng tôi là hiểu cơ chế hoạt động cơ bản của nó nhé.

Hiện nay, có khá nhiều thư viện nhưng nay mình sẽ giới thiệu đến các bạn thư viện mà mình hay dùng nhất đó là Owl Carousel 2 nhé. Sở dĩ gọi là 2 vì nó là version 2 rồi 😀

Các bước cơ bản với Owl Carousel 2

Cài đặt Owl Carousel 2

Các bạn truy cập vào trang chủ và click Download trên menu của nó. Hoặc không để cho nhanh thì bạn bấm thẳng vào đây cũng được.

Tải về xong thì giải nén file .zip ra. Bạn không cần sử dụng hết toàn bộ file trong đó mà chỉ giữ lại 3 files quan trọng là owl.carousel.min.cssowl.theme.default.min.css và owl.carousel.min.js thôi. Thực ra, file owl.theme.default.min.css bạn muốn dùng hay không cũng được nhưng mình nghĩ vẫn nên dùng để lấy đủ hết css của nó nhé.

Khởi tạo hiệu ứng đơn giản

Để code được thì bạn biết phải làm gì rồi chứ? Đó là mở code editor lên hoặc code thẳng trên blog/website của bạn cũng đều ok hết nhé.

Sau khi đã có đầy đủ 3 files trên thì ta phải thêm chúng vào file .html ta sẽ làm việc bằng 2 câu lệnh đơn giản và quen thuộc dùng để khai báo CSS và Javascript.

CSS chèn trước </head>

<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">

JS chèn trước </body> và sau thư viện Jquery nhé (phiên bản tối thiểu cho phép là v1.8.3)

<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>

Trong đó, bạn phải thay đường dẫn phù hợp đến các file mà bạn đang để nhé. Nếu không muốn chèn dưới local như kia thì up hết file lên host nào đó rồi chèn link vào cũng được (cái này mình nghĩ các bạn dev phải biết hết vì nó cơ bản rồi nên mình không viết chi tiết)

Tiếp đến, ta tạo HTML cơ bản sau:

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

Gọi plugin bằng cách thêm đoạn Jquery này sau 2 dòng khai báo thư viện trên.

$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});

Lưu lại và ra xem kết quả. Nếu nó chạy chạy thì bạn đã làm đúng các bước rồi đó. Ngoài ra, bạn hoàn toàn có thể tùy biến đoạn Jquery mới thêm ở trên với 1 số thông số cơ bản và hay dùng. Ví dụ, thay đoạn trên bằng đoạn dưới này.

$('.owl-carousel').owlCarousel({
loop:true, // tạo vòng lặp, nếu false thì chạy hết số lượng phần tử nó sẽ quay ngược lại vị trí phần tử ban đầu
margin:10, // khoảng cách giữa các phần tử
nav:true, // tạo 2 nút previous và next (trước và sau)
autoplay:true, // tự động chạy
responsive:{ // căn chỉnh số lượng phần tử tùy theo kích thước màn hình tùy chọn
0:{ // từ 0px đến 600px sẽ hiển thị 1 phần tử duy nhất
items:1
},
600:{ // từ 600px đến 1000px sẽ hiển thị 3 phần tử
items:3
},
1000:{ // tương tự từ 1000px trở đi sẽ hiển thị 5 phần tử
items:5
}
}
})

Để hiểu thêm và biết cách sử dụng các thông số khác thì bạn vào Demos của nó đọc nhé. Có 1 điều rất hay và thú vị là Owl Carousel 2 còn tích hợp hỗ trợ sử dụng animate.css của Daniel Eden để tạo ra nhiều hiệu ứng chuyển đổi hơn.

Có nhiều bạn khi làm sẽ gặp khó khăn trong việc xử lý làm sao trên cùng 1 trang có nhiều hơn 1 carousel và phải tùy chỉnh khác nhau. Vậy làm sao để khắc phục được điều đó? Rất đơn giản thôi, ta chỉ cần thêm class hoặc id vào HTML của nó. Ví dụ như:

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

hoặc khi dùng class thì sẽ là:

<div class="owl-carousel carousel-1">
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
</div>

Khi đó, đoạn Jquery gọi plugin cũng phải thay đổi theo đúng class, id thêm vào nhé.

$(document).ready(function(){
$("#carousel-1").owlCarousel();
});

hoặc là với class như ví dụ trên thì như sau:

$(document).ready(function(){
$(".carousel-1").owlCarousel();
});

Dùng id hay class là tùy bạn nhưng mình khuyên thì nên dùng class để tránh sau này có lơ mơ gặp tình trạng 2 nơi cùng 1 id thì không vui đâu.

Lời kết

Vậy là mình vừa hướng dẫn xong cho các bạn cách làm thế nào để cài đặt và khởi tạo chương trình đơn giản giúp tạo hiệu ứng chuyển đổi phần tử trong HTML với Owl Carousel 2 rồi đó. Thư viện này còn rất nhiều cái để bạn khám phá trong phần Demos và Docs của nó ấy. Hiệu ứng này thì chỗ nào cũng dùng được nhé, cả Blogspot lẫn WordPress đều được.

Mình hi vọng rằng nhờ bài viết, các bạn có thể làm thêm 1 vài cái thú vị cho blog/website thêm đẹp. Nếu có bất kì khó khăn gì thì hãy để lại comment phía dưới. Mình sẽ trả lời sớm nhất có thể nhé.

15
Bình luận

avatar
6 Comment threads
9 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
6 Số người bình luận
Nguyen DienCuong NguyenNguyễn PhúNIỆM STYLE BLOGGERTrần Nhật Sinh Người mới bình luận
  Đăng kí  
mới nhất cũ nhất nhiều vote nhất
Nhận thông báo từ
Quốc Bảo Blog | 24 comments
Khách
Quốc Bảo Blog | 24 comments

cái này nên áp dụng là gì ta

Trần Nhật Sinh | 15 comments
Khách
Trần Nhật Sinh | 15 comments

Cái này nó có ảnh hưởng nhìu đến tốc độ load không a

Trần Nhật Sinh | 15 comments
Khách
Trần Nhật Sinh | 15 comments

A cường ơi. Khi nào rảnh hd e thêm comment blogger được không a

Trần Nhật Sinh | 15 comments
Khách
Trần Nhật Sinh | 15 comments

E có code các thẻ b:include mà e đặt vào hết rồi nhưng nó vẫn ko có cmt blogger

NIỆM STYLE BLOGGER | 5 comments
Khách
NIỆM STYLE BLOGGER | 5 comments

Này áp dụng Blogger đc mà đúng ko?

NIỆM STYLE BLOGGER | 5 comments
Khách
NIỆM STYLE BLOGGER | 5 comments

Này để áp dụng vô mấy cái temp bán hàng 😀

Nguyễn Phú | 1 comments
Khách
Nguyễn Phú | 1 comments

áp dụng vào blogger đc ko a nhỉ?

Nguyen Dien | 4 comments
Khách
Nguyen Dien | 4 comments

a cường help em cái này với, em làm temp instagram và giờ còn mỗi cái này bị lỗi, em xài js random cho phần like và mỗi khi tải thêm là các post bên dưới không hiển thị like , a chỉ em cách khắc phục với @@
link https://youtu.be/4DLAkqojfok