Tạo Slide ảnh Trong HTML Với OwlCarousel - Quách Quỳnh
Có thể bạn quan tâm
Để 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
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.
Từ khóa » Slide Sản Phẩm Chạy Ngang
-
Hướng Dẫn Tạo Trang Cuộn Sản Phẩm Mới Bằng Bootstrap
-
Cách Tạo Slide Sản Phẩm Nổi Bật Bằng Bootstrap - HocwebGiare
-
Slider Sản Phẩm Từ Bootstrap Carousel Với Khả Năng Responsive
-
Code Slide Ảnh Chạy Ngang Bằng Jquery Css Image Slider, Bài 11
-
Slider Bài Mới Nhất Trượt Ngang Với Thumbnail Cho Blogger [Ves1]
-
Tạo Slider Chỉ Với HTML Và CSS - Viblo
-
Cách Tạo Slideshow Cho Trang Web(2022)
-
CÁCH TẠO SLIDE TRÌNH DIỄN BANNER CHẠY NGANG ĐỘC ĐÁO
-
Hỏi Về "sản Phẩm Slide Chạy Ngang"
-
Code Slide ảnh Chạy Ngang Liên Tục Không Bị Khoảng Trống - Taolao
-
15 Thư Viện Slider Jquery Miễn Phí Cho Dự án Website Của Bạn
-
Hướng Dẫn Làm Slide Sử Dụng Javascript - Homiedev
-
Carousel - LadiPage Help Center