Front End: Tạo Slideshow Đẹp Mắt Trên Trang Web Của Bạn Bằng Owl Carousel

Owl Carousel là một thư viện JavaScript mã nguồn mở (open-source) dùng để tạo ra các slideshow, carousel (trình diễn hình ảnh theo dạng lưới trượt) dễ dàng và linh hoạt trên trang web. Nó giúp bạn tạo ra các thành phần trình diễn động một cách đẹp mắt mà không cần phải viết mã JavaScript phức tạp.

Dưới đây là một số điểm nổi bật của Owl Carousel:

1. Dễ sử dụng: Owl Carousel cung cấp cú pháp dễ đọc và dễ sử dụng, cho phép bạn thêm carousel vào trang web một cách nhanh chóng.
2. Đa dạng về tùy chọn: Thư viện này cung cấp nhiều tùy chọn cấu hình, từ việc thiết lập số lượng slide hiển thị, độ dời (margin) giữa các slide, thời gian trượt, các nút điều hướng và nhiều tùy chọn khác.
3. Hỗ trợ đa phương tiện: Owl Carousel không chỉ hỗ trợ hình ảnh mà còn hỗ trợ video và nội dung HTML khác, giúp bạn tạo ra các slideshow đa phương tiện đa dạng.
4. Tương thích nhiều thiết bị: Owl Carousel được thiết kế để tương thích với nhiều loại thiết bị và kích thước màn hình khác nhau, giúp đảm bảo trải nghiệm người dùng tốt trên cả máy tính để bàn và thiết bị di động.
5. Hỗ trợ kéo thả (drag and drop): Owl Carousel hỗ trợ chức năng kéo thả, giúp người dùng dễ dàng chuyển đổi giữa các slide trên các thiết bị có màn hình cảm ứng.
6. Hỗ trợ trình duyệt đa nền tảng: Thư viện này tương thích với hầu hết các trình duyệt phổ biến như Chrome, Firefox, Safari, Microsoft Edge, Internet Explorer và nhiều trình duyệt khác.
7. Cộng đồng và tài liệu hỗ trợ tốt: Owl Carousel có một cộng đồng phát triển lớn và có nhiều tài liệu hướng dẫn, ví dụ và nguồn tham khảo khác giúp bạn sử dụng và tùy chỉnh thư viện này.

Để sử dụng Owl Carousel, bạn cần bao gồm các tệp CSS và JavaScript của thư viện vào trang web của mình, sau đó cấu hình và gọi Owl Carousel theo cú pháp hợp lệ.

Để đả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

Include CSS

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

Include JS

1 2	<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.

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

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 document của Owl Carousel