Để tạo Slide ảnh chạy ngang có nhiều cách khác nhau. Bạn có thể dùng HTML, CSS kết hợp với JavaScript hoặc jQuery, dùng Bootstrap. Một cách nữa giúp tiết kiệm thời gian đó là sử dụng Framework OwlCarousel được viết bằng JavaScript.
Hiện nay có nhiều Framework được phát triển tuy nhiên với OwlCarousel khi dùng tương đối nhẹ. Điều này sẽ rất có lợi cho website về mặt tốc độ.
Sau đây mình sẽ hướng dẫn bạn cách tạo Slide ảnh với OwlCarousel.
Bước 1: Tải về máy tính
https://github.com/OwlCarousel2/OwlCarousel2/archive/2.3.4.zip
Giải nén và đưa vào thư mục dự án của bạn.
Bước 2: Nhúng file CSS và Js vào cặp thẻ <head>…</head>
<link rel="stylesheet" href="owlcarousel/owl.carousel.css"> <link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="owlcarousel/owl.carousel.min.js"></script>
Đối với WordPress bạn làm như sau:
Sau khi tải file về bạn cần vào thư mục owlcarousel/dist/assets copy file owl.carousel.css và owl.theme.default.min.css ra thư mục owlcarousel. Tiếp theo vào owlcarousel/dist/ copy file javascript owl.carousel.min.js cũng ra owlcarousel.
Thêm đoạn code sau vào file function
define( 'BASE_URL', get_template_directory_uri() );
function yourtheme_scripts(){
wp_enqueue_script( 'owl-js', BASE_URL . '/lib/owl/owl.carousel.min.js', array('jquery'), null, true );
}
add_action( 'wp_enqueue_scripts', 'yourtheme_scripts');
function yourtheme_styles() {
wp_enqueue_style('owl-css', BASE_URL . '/lib/owl/owl.carousel.css');
wp_enqueue_style('owl-css2', BASE_URL . '/lib/owl/owl.theme.default.min.css');
}
add_action( 'wp_enqueue_scripts', 'yourtheme_styles' );
Và cài thêm plugin Enable jQuery Migrate Helper.
[danger-box text=’Lưu ý phải gọi đúng đường dẫn thư mục Slide mới chạy được.’]
Bước 3: Viết mã HTML
Thay thành ảnh của bạn
<div class="owl-carousel"> <div><img src="https://quynhweb.pro/wp-content/uploads/2021/07/wordpress-banner.png"></div> <div><img src="https://quynhweb.pro/wp-content/uploads/2021/07/wordpress-banner.png"></div> <div><img src="https://quynhweb.pro/wp-content/uploads/2021/07/wordpress-banner.png"></div> <div><img src="https://quynhweb.pro/wp-content/uploads/2021/07/wordpress-banner.png"></div> <div><img src="https://quynhweb.pro/wp-content/uploads/2021/07/wordpress-banner.png"></div> </div>
Bước 4: Thêm đoạn code Jquery để chạy Slide
jQuery(document).ready(function(){
jQuery(".owl-carousel").owlCarousel();
});
Thêm một số tùy chỉnh
- Thay đổi số cột theo kích thước Responsive. Kích thước 600 và 1000 điều chỉnh số cột tại items.
- Điều chỉnh tốc độ autoplayTimeout:1000 thay thành 5000 hoặc 10000 để thời gian trượt lâu hơn
<script type="text/javascript">
jQuery('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
autoplay:true,
autoplayTimeout:1000,
autoplayHoverPause:true,
responsive:{
0:{
items:1
},
600:{
items:5
},
1000:{
items:3
}
}
});
</script>
Với OwlCarousel bạn đã tạo nên được Slide hình ảnh thật chuyên nghiệp. Bên cạnh đó nó cũng dùng tạo Slide bài viết nữa. Và được tích hợp cho việc xây dựng website với nhiều mã nguồn khác nhau như WordPress, Laravel.
