Owl Carousel 2 – Plugin jQuery tạo slide tuyệt đẹp

1
2688
owl-carousel
owl-carousel
Owl Carousel 2 – Plugin jQuery tạo slide tuyệt đẹp
5 (100%) 6 votes

Giới thiệu

Owl Carousel là một plugin jQuery tạo slide rất đẹp và tuyệt vời, mình rất hay sử dụng trong các dự án, vì nó đơn giản, dễ dùng, nhiều options. Các bạn có thể tạo slideshow ảnh, tạo slide bài tin…với các tùy biến phong phú. Tại thời điểm bài viết này thì phiên bản đang là Owl Carousel 2.2.1 (các bạn có thể xem tại Trang Chủ).

Trên trang chủ của Owl Carousel cũng đã có phần Docs trình bày rất rõ cách sử dụng của Plugin này, nhưng có 1 số bạn mới học và mới sử dụng cũng chưa có kinh nghiệm, nên mình sẽ hướng dẫn sử dụng Owl Carousel 2 để các bạn áp dụng Plugin này vào trong Project nhé. Yêu cầu các bạn phải biết sử dụng jQuery ở mức căn bản.

Cài đặt

Đầu tiên là ko thể thiếu được jQuery rồi phải ko các bạn, có thể tải file trực tiếp từ Trang chủ jQuery hoặc sử dụng CDN, ở đây mình sẽ sử dụng file jQuery offline nhé (jQuery.min.js), tiếp theo các bạn hãy download Plugin tại Trang Chủ hoặc DOWNLOAD

Giải nén file OwlCarousel2-2.2.1.zip đã tải về và copy các file sau vào project của bạn

  1. owl.carousel.min.js
  2. owl.carousel.min.css
  3. owl.theme.default.min.css

Bây giờ cấu trúc folder của các bạn sẽ như thế này nhé

Ok, các bạn sẽ chèn các file cần thiết vào phần <head></head> như sau:

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

    // JS
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/owl.carousel.min.js"></script>
</head>

Áp dụng vào project

Có rất nhiều options cho các bạn tùy chọn :D, nhưng ở đây mình sẽ dùng Basic để cho đơn giản nhất, những cái khác tương tự, chỉ cần thêm options cho nó là được.

 

Các bạn đưa phần code HTML cần làm slide vào nhé, chú ý là phải có phần div bao ngoài có class : owl-carousel, các div có class=”item” chính là các dữ liệu b cần làm slide (nếu là dữ liệu lấy từ Database ra thì các bạn chỉ cần dùng PHP foreach ra là xong.

<body>
    <div class="owl-carousel owl-theme">
        <div class="item"><img src="img/css.png" alt=""></div>
        <div class="item"><img src="img/html.png" alt=""></div>
        <div class="item"><img src="img/javascript.png" alt=""></div>
        <div class="item"><img src="img/jpg.png" alt=""></div>
        <div class="item"><img src="img/mp3.png" alt=""></div>
        <div class="item"><img src="img/png.png" alt=""></div>
        <div class="item"><img src="img/xml.png" alt=""></div>
        <div class="item"><img src="img/zip.png" alt=""></div>
    </div>
</body>

Cuối cùng là đoạn jQuery dùng để gọi Plugin nhé

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

Các thuộc tính như :

  • loop : true ( nếu là true thì slide sẽ lặp đi lặp lại vô hạn ).
  • margin: 10 ( khoảng margin giữa các item trong slide, b tùy chỉnh theo ý).
  • nav : true ( thanh navigation có phần “prev” và “next”).
  • responsive : ( tùy chọn số lượng item theo kích thước màn hình ).

Ngoài ra còn có rất nhiều option khác, các bạn vào đây để xem và thêm vào nhé. Vậy là bây giờ code hoàn chỉnh của chúng ta như sau :

<!DOCTYPE html>
<html lang="vi">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Owl Carousel - Tinh Yeu Cong Nghe.Net</title>

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

        <script src="js/jquery-3.2.1.min.js"></script>
        <script src="js/owl.carousel.min.js"></script>
    </head>
    <body>

        <div class="owl-carousel owl-theme">
            <div class="item"><img src="img/css.png" alt=""></div>
            <div class="item"><img src="img/html.png" alt=""></div>
            <div class="item"><img src="img/javascript.png" alt=""></div>
            <div class="item"><img src="img/jpg.png" alt=""></div>
            <div class="item"><img src="img/mp3.png" alt=""></div>
            <div class="item"><img src="img/png.png" alt=""></div>
            <div class="item"><img src="img/xml.png" alt=""></div>
            <div class="item"><img src="img/zip.png" alt=""></div>
        </div>

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

    </body>
</html>

Vậy là chúng ta đã xong rồi đó, rất dễ phải không các bạn, bây giờ mình sẽ hướng dẫn thêm các bạn tùy chỉnh làm sao cho slide của chúng ta được đẹp.

Tùy biến Slide cho đẹp mắt hơn

Mình sẽ hướng dẫn các bạn cách tùy biến slide ở trên cho đẹp mắt hơn, thay chữ Prev, Next bằng mũi tên. Tùy biến CSS cho cái “chấm tròn” nav kia đc đẹp hơn.

Đầu tiên chúng ta sẽ tiến hành thay mũi tên vào trước bằng thuộc tính “navText” của Owl Carousel đã cung cấp, vào Options để đọc thêm, dấu mũi tên các bạn có thể lên google tìm hình ảnh, icon về để thêm vào nhé, ở đây mình có sẵn rồi (sẽ có link ở dưới cho các bạn tiện download).

Các bạn tạo thêm folder icon ở trong folder img, rồi copy 2 hình mũi tên này vào

Ở đoạn code gọi Plugin chúng ta sẽ thêm thuộc tính “navText” như sau :

navText: [“<img src=’img/icon/prev.png’>”,“<img src=’img/icon/next.png’>”],

<script>
    $('.owl-carousel').owlCarousel({
        loop:true,
        margin:10,
        nav:true,
        navText: ["<img src='img/icon/prev.png'>","<img src='img/icon/next.png'>"],
        responsive:{
            0:{
                items:1
            },
            600:{
                items:3
            },
            1000:{
                items:5
            }
        }
    })
</script>

Các bạn F5 lại và xem thành quả.

Tiếp theo chúng ta sẽ CSS thêm 1 chút cho đẹp hơn nhé, chuyển mỗi nút sang 1 bên Slide, bỏ nền đi, đổi màu cho chấm tròn dots và thuộc tính active.

// CSS cho phần nav
.owl-theme .owl-nav [class*=owl-] {
    background: transparent;
}

.owl-theme .owl-nav {
    position: relative;
    bottom: 140px;
}

.owl-prev {
    position: absolute;
    left: -50px;
}

.owl-next {
    position: absolute;
    right: -50px;
}

// CSS cho phần dots

.owl-theme .owl-dots .owl-dot.active span {
    background: #e09422;
    width: 30px;
    transition: all 0.5s;
}

.owl-theme .owl-dots .owl-dot span {
    background: #e09422;
}

Thành quả cuối cùng của chúng ta, các bạn có thể tùy chỉnh theo cách khác, theo ý của các bạn nhé. Chúc các bạn thành công !

Download toàn bộ code ở trên

DOWNLOAD

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.