Owl Carousel: Slide Show website chuyên nghiệp – kèm video

Owl Carousel là một plugin giúp xây dựng các slide show được sử dụng hàng đầu trong website bởi tính đa năng, tiện lợi của nó. Nếu bạn đang mốn áp dụng vào dự án của mình trong bài viết này tôi sẽ giúp bạn.

Tại sao cần dùng Owl Carousel

Qua thời gian nhiều năm xây dựng website tôi đã trải nghiệm qua hàng chục loại slide khác nhau nhưng với owl carousel thì cảm thấy mọi thứ đơn giản và dễ dàng hơn rất nhiều.

Trước khi bắt đầu học cách sử dụng bên dưới là một số ưu điểm của Owl Carousel:

• Nhiều tùy chọn để điều chỉnh slide như ý muốn
• Hỗ trợ chạm vào để kéo slide di chuyển
• Hỗ trợ chạy tốt linh hoạt trên đa thiết bị
• Chạy tốt trên hầu hết các trình duyệt
• Sử dụng dễ dàng
• Dung lượng nhẹ

Để đảm bảo download được thư viện chuẩn không có virus bạn click vào bên dưới:

Download Owl Carousel: https://github.com/OwlCarousel2/OwlCarousel2/archive/2.3.4.zip

Sau khi tải xuống bạn tìm đến cấu trúc thư mục và import nó vào dự án của mình.

owlcarousel/
├── assets/
│   ├── owl.carousel.css
│   ├── owl.carousel.min.css
│   ├── owl.theme.default.css
│   ├── owl.theme.default.min.css
│   ├── owl.theme.green.css
│   ├── owl.theme.green.min.css
│   └── owl.video.play.png
│
├── owl.carousel.js
├── owl.carousel.min.js
├── LICENSE-MIT
└── README.md

Các bước thêm Owl Carousel vào website

Tôi biết phần này rất quan trọng nên tôi đã ghi hình video để giúp bạn nhìn và làm theo thành công 100%. Bạn xem nó ngay phía bên dưới nhé.

Tóm tắt các bước thêm Owl Carousel vào website.

Bước #1. Include Css

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

Bước #2: Include JS

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>

Lưu ý: Quá trình Include Css và Js vào dự án bạn cần để ý đường dẫn để đảm bảo link đến chính xác owl carousel.

Bước #3. Thêm cấu trúc Html của Owl Carousel

Với slide này cấu trúc bạn chỉ cần đơn giản như bên dưới. Bạn lưu ý cần có class owl-carousel đến bước tiếp theo dựa nào nó để kích hoạt.

<!-- Set up your HTML -->
<div 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 #4. Kích hoạt slide Owl Carousel

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

Các tùy chọn của Owl Carousel

Chúng ta có rất nhiều tùy chọn khác nhau của Owl Carousel giúp dễ dàng tùy chỉnh slide như ý muốn như:

• Số lượng phần tử hiển thị của slide
• Khoảng cách giữa các phần tử
• Tùy chỉnh số lượng phần tử trên slide ở các thiết bị khác nhau
• Hiển thị các thanh Next, Prev
• …

Bạn xem tất cả các Option tại đây: https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html

Ví dụ

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
})

Khi bạn muốn thay đổi option nào bạn thêm nó vào khi kích hoạt thư viện Owl Carouse.

Tổng kết

Trong bài này tôi đã hướng dẫn bạn cách để thêm owl carousel vào website, ngay bây giờ bạn cần xem kỹ và thực hiện từng bước theo hướng dẫn của tôi ở video và bài viết này để thêm nó vào dự án của mình.

Xin chào, sớm hẹn gặp lại!