Hướng dẫn tạo slideshow bằng Owl Carousel

Giới thiệu

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

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

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

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

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

Hướng dẫn

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

Kết luận

Khi thiết kế website chắc chắn các bạn sẽ cần đến slideshow, để ngồi code cả đống code cho slideshow thì chắc cũng mất đến cả buổi, vì vậy việc sử dụng open source là thứ cần thiết để tiết kiệm thời gian và công sức của các bạn. Cùng với open source Owl Carousel đầy đủ tính năng và dễ dàng tùy biến này thì còn ngại gì vài cái slideshow…

Để tùy biến layout của slide thì các bạn buộc phải phân tích code của slide sau đó sử dụng CSS để tùy chỉnh thêm nhé.