Tạo Slider WordPress chuyên nghiệp với Owl Carousel
Tạo Slider Wordpress chuyên nghiệp với Owl Carousel một cách đơn giản nhất
Như các Bạn cũng thấy ở phần đầu trang chủ vnkings.com có Slider các bài mới nhất, một số bạn đã inbox hỏi dùng plugin gì hay làm như thế nào, thực tế đây là 1 chức năng mình tự làm và được hỗ trợ bởi Owl Carousel chứ không dùng Plugin nào cả.
Bài viết này sẽ giúp bạn tạo Slider WordPress chuyên nghiệp với Owl Carousel :
Đầu tiên các bạn tải file này:
Tải về
Khi giải nén các bạn Upload 2 file này lên thư mục theme đang sử dụng:
- owl.carousel.min.js
- owl.carousel.css
Thêm đoạn lấy CSS này vào file header.php
<link href="đường dẫn tới file/owl.carousel.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="đường dẫn tới file js/owl.carousel.min.js"></script> //đường dẫn tới file css : ví dụ file css nằm ở thư mục theme-vnkings/css/owl.carousel.css bạn có thể dùng đoạn này <link href="<?php bloginfo("stylesheet_directory");?>/css/owl.carousel.css" rel="stylesheet" type="text/css" />
– Bây giờ ở file index.php (trang chủ) các bạn tìm đến vị trí cần đặt Slider và thêm đoạn code này:
// Lấy 10 bài viết mới nhất <div id="owl-lovend" class="owl-carousel"> <?php $owl = new WP_Query(array( 'post_type'=>'post', 'post_status'=>'publish', 'orderby' => 'ID', 'order' => 'DESC', 'posts_per_page'=> 10)); ?> <?php $i = 0; while ($owl->have_posts()) : $owl->the_post(); ?> // lấy hình ảnh của bài viết mới nhất <div class="item"><a href=""><?php the_post_thumbnail("thumbnail",array( "title" => get_the_title(),"alt" => get_the_title() ));?></a></div> <?php $i++; endwhile ; wp_reset_query() ;?> </div> // cấu hình 5 ảnh bài viết mới nhất trên 1 hàng dạng slider ngang. <script> $(document).ready(function() { $("#owl-lovend").owlCarousel({ items : 5, }); }); </script>
Các bạn có thể thêm tùy chọn cho slider của mình bằng cách xem các cấu hình nâng cao ở trang này : http://owlgraphic.com/owlcarousel/
Sau đó bạn ra trang chủ F5 và xem thành quả của mình nhé
Trên đây là Slider mình đã làm bằng Owl Carousel, nếu có vấn đề gì thắc mắc hoặc cần hỗ trợ, bạn có thể liên hệ qua box comment bên dưới.
Chúc các bạn thành công!
Cái slider trên trang truyện vnkings cũng làm từ cái này hả bác. cái slider đó nhìn đẹp ghê 😀
Chuẩn bạn ạ.
bạn có thể viết bài hướng dẫn cách tạo mục danh sách chương giống vnkings không ạ
Chào bạn, Mình luôn ấp ủ suy nghĩ chia sẻ cách tạo một trang truyện full chức năng nhưng chưa có thời gian, mình sẽ cố gắng chia sẻ trong thời gian tới.
Mình sẽ luôn theo dõi blog bạn. Hiện tại trong lúc chờ bạn viết bài thì mình có sử dụng phân trang bài viết của wordpress bằng hàm , nhưng mình muốn nén nó vào trong khung. mà không biết chèn cái code ở đâu trong chỗ này cả. chèn đâu cũng báo lỗi… mình gà quá ngồi mò tới 2h đêm rồi vẫn chưa ra đành phải cầu cứu bạn. bạn xem giúp mình với 🙁
'', 'after' => '', 'link_before' => '
', 'link_after' => '', 'next_or_number' => 'next_and_number', 'nextpagelink' => __('Next', 'schema' ), 'previouspagelink' => __('Previous', 'schema' ), 'pagelink' => '%','echo' => 1 )); ?>
Chào bạn,
Bạn copy từ phần
bắt đầu của đoạn code trên bạn nhé.
chào anh, anh có thể hướng dẩn em làm slider đứng dược không ạ. em cảm ơn
Em làm đã làm theo hướng dẫn mà nó chỉ hiện // Lấy 10 bài viết mới nhất
Chào bạn, bạn gửi mình địa chỉ web của bạn để mình kiểm tra trực tiếp cho bạn nhé.
Web mình đó ạ https://vnpaza.com
Mình kiểm tra thì web bạn đang báo lỗi chưa có thư viện Jquery.
Bạn thêm đoạn này vào trên của js (owl.carousel.min.js) trong bài nhé:
dạ được rồi ạ
sao nó k có dấu mũi tên di chuyển giống trong hình vậy ạ
Bạn thêm 2 thông số này vào đoạn JS trên nhé:
navigationText:[“<",">“],
navigation:true
Cụ thể
dạ em cảm ơn ạ
Làm sao cho nó thành 2 hàng và 8 bài dc ạ?
Hơi ngoài lề chút, theme của bác nhìn gọn nhẹ và mượt quá, k biết là bác tự viết hay lấy từ mẫu theme nào ạ? Bác có thể chia sẻ theme đc không hihi
Chào bạn, Các Theme mình đều tự làm và viết từng dòng code, không lấy từ theme nào bạn nhé.
Vì thế nên có lẽ tránh được những phần thừa hay Plugin không cần thiết.
Hiện tại mình chưa có ý định share Theme này, nếu có sẽ sớm thông báo trên Trang chủ. Cảm ơn bạn góp ý.
hướng dẫn mình với bạn ơi.mình làm nó không hiển thị