Có nhiều cách để chúng ta có thể tạo slide hình ảnh hoặc slide cho nội dung, với WordPress thì bạn cũng đã có những plugin miễn phí giúp tạo slide. Bài viết này mình sẽ giới thiệu cho bạn thêm một thư viện nữa cũng với mục đích tạo slide cho hình ảnh và nội dung, cái mình muốn nói đến đó là Owl Carousel.
Trước khi đọc tiếp nội dung trong bài này thì xin mời bạn quay lại xem những bài viết mình đã đăng trên website Học WordPress cũng nói về cách tạo slide trên WordPress.
Trong khi các plugin được xây dựng sẵn là dành cho những bạn không chuyên về code, còn những thứ mà có đụng tới chỉnh sửa giao diện thì bạn nên học qua một chút xíu về PHP và giao diện WordPress thì sẽ dễ làm hơn.
Cách sử dụng của plugin Owl Carousel rất đơn giản, bạn chỉ cần load các tập tin css và thư viện javascript liên quan, sau đó tạo code HTML và cuối cùng là khởi tạo hàm bằng javascript.
<!-- Basic stylesheet --> <link rel="stylesheet" href="owl-carousel/owl.carousel.css"> <!-- Default Theme --> <link rel="stylesheet" href="owl-carousel/owl.theme.css"> <!-- Include js plugin --> <script src="owl-carousel/owl.carousel.js"></script>
Đối với các giao diện bạn chạy demo thì load css và javascript như thế nào cũng được, nhưng nếu áp dụng vào WordPress thì nhớ dùng các hàm enqueue để load nhé.
Tiếp theo, bạn khởi tạo nội dung bạn muốn hiển thì thành slide bằng mã 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>
Cuối cùng, bạn sẽ tạo một tập tin javascript hoặc khai báo trực tiếp hàm để gọi Owl Carousel.
$(".owl-carousel").owlCarousel();Sau khi hoàn thành code thì bạn đã có thể thấy được nội dung slide trên trang demo. Trong tập tin mà bạn tải về trên trang chủ của họ, sẽ có nhiều demo cho bạn tham khảo, bạn thích dùng kiểu nào thì khai báo theo kiểu đó, rất dễ sử dụng và tiện lợi. Chúc bạn thành công.
