Thanh trượt băng chuyền được sử dụng rộng rãi trong thiết kế web vì khả năng hiển thị hiệu quả các dịch vụ, hình ảnh, tính năng và nhiều nội dung khác mà không chiếm quá nhiều không gian. Bằng cách triển khai băng chuyền, bạn có thể tối ưu hóa việc sử dụng không gian và nâng cao trải nghiệm người dùng tổng thể.
Trong hướng dẫn này, tôi sẽ hướng dẫn bạn quy trình tích hợp chức năng băng chuyền vào trang web Divi của bạn. Chúng tôi sẽ tận dụng thư viện Swiper.js từ nguồn của bên thứ ba và áp dụng CSS tùy chỉnh để điều chỉnh thanh trượt theo sở thích của bạn.
Để kết hợp chức năng thanh trượt vào trang web Divi của bạn, chỉ cần gọi thư viện Swiper.js trong tệp tin.php của chủ đề con bạn.
Thiết kế thanh trượt băng chuyền không cần plugin
Để kích hoạt chức năng cho thanh trượt của chúng tôi, chúng tôi phải đưa thư viện Swiper.js vào tệp tin.php của chủ đề con Divi.
Tạo trang web tuyệt vời
Với trình tạo trang miễn phí tốt nhất Elementor
Bắt đầu bây giờNgoài ra, chúng ta cần chèn mã cấu hình chỉ định các tham số như số cột sẽ hiển thị trong thanh trượt, liệu các trang chiếu có lặp lại hay không và có nên bật điều hướng mũi tên và phân trang hay không, cùng với các cài đặt khác.
Để biết danh sách đầy đủ các cấu hình có sẵn, vui lòng tham khảo trang API Swiper . Bây giờ chúng ta hãy đi sâu vào việc thực hiện.
Tất cả mã PHP phải được tích hợp vào tệp tin.php của chủ đề con Divi. Bạn có thể chỉnh sửa tệp này thông qua FTP, Trình quản lý tệp trên máy chủ của bạn hoặc bằng cách sử dụng Trình chỉnh sửa chủ đề có thể truy cập trong Bảng điều khiển WordPress. Trong trường hợp này, chúng ta sẽ tiếp tục với Trình chỉnh sửa chủ đề.
Để đưa thư viện Swiper.js vào hàng đợi trong chủ đề con của chúng ta, hãy làm theo các bước sau:
- Điều hướng đến Giao diện → Trình chỉnh sửa chủ đề
- Mở tệp tin.php trong chủ đề con của bạn và thêm mã PHP tùy chỉnh.
<?php
// Enqueue Swiper.js Library
function dp_carousel(){
wp_enqueue_script( 'your-swiper-js-slug', 'https://unpkg.com/swiper@7/swiper-bundle.min.js', [] , '7.0.2', true );
wp_enqueue_style( 'your-swiper-css-slug', 'https://unpkg.com/swiper@7/swiper-bundle.min.css', [] , '7.0.2');
}
add_action('init', 'dp_carousel', 99);
function dp_carousel_slider_scripts() {
?>
<script type="text/javascript">
// adding navigation html
(function(){
window.addEventListener('DOMContentLoaded', function(){
let sliders = document.querySelectorAll('.dp-carousel')
sliders.forEach(function( slider ) {
swiper_init(slider)
})
});
function swiper_init(slider){
// configuration
if(slider === null) return;
// extra controls
let extraControls = '';
// If we need pagination
extraControls += '<div class="swiper-pagination"></div>';
// If we need navigation buttons
extraControls += '<div class="swiper-button-prev"></div><div class="swiper-button-next"></div>';
slider.innerHTML = '<div class="swiper-container" style="overflow:hidden">' + slider.innerHTML + '</div>' + extraControls;
// Wait for Swiper
var waitForSwiper = setInterval( function () {
if (typeof Swiper != "undefined") {
clearInterval(waitForSwiper);
let carousel_container = slider.querySelector('.swiper-container');
const swiper = new Swiper( carousel_container , {
slidesPerView: 1, // mobile value
loop: true,
spaceBetween: 0, // mobile value
autoplay: {
delay: 3000,
},
speed: 600,
// If we need pagination
pagination: {
el: '.swiper-pagination',
clickable : true,
dynamicBullets: true
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
breakpoints: {
768: { // Tablet
slidesPerView: 2,
spaceBetween: 20,
},
981: { // Desktop
slidesPerView: 3,
spaceBetween: 30,
}
}
});
}
}, 20);
}
})();
</script>
<?php }
add_action( 'wp_footer', 'dp_carousel_slider_scripts'); - Chọn Cập nhật tệp.
Bây giờ chúng ta phải sử dụng Divi Builder để tạo tất cả những thứ sẽ được hiển thị trong thanh trượt của chúng ta. Các lớp và ID tùy chỉnh hàng, cột và mô-đun sẽ cần được thêm vào. Chỉ có thể có một bố cục cột và nó sẽ chuyển đổi thành băng chuyền dựa trên số cột được chỉ định trong mã PHP cài đặt.
Tôi đã sử dụng các mô-đun Blurb với một số thiết kế đẹp mắt và hiệu ứng di chuột cho ví dụ này, nhưng bạn có thể sử dụng bất kỳ mô-đun Divi nào bạn thích.
Thêm phần có một hàng cột vào trang của bạn bằng Divi Builder.
Tìm mô-đun Lời giới thiệu và thêm nó vào trang.
Có thể truy cập cài đặt hàng bằng cách nhấp vào biểu tượng bánh răng trên thanh công cụ màu xanh lá cây.
Chọn ID & Lớp CSS nâng cao.
Bao gồm dp-carousel trong trường Lớp CSS.
Chuyển sang tab Nội dung
Mở cài đặt Cột và thêm lớp trình bao bọc vuốt vào trường Lớp CSS.
Để tùy chỉnh mô-đun trình bày, hãy mở cài đặt mô-đun và kích hoạt tab nâng cao. Sau đó thêm slide-slide vào trường CSS.
Điều hướng đến tab Nội dung và nhấp vào chuyển đổi Văn bản.
Bao gồm tiêu đề và nội dung.
Thêm hình nền trong nút chuyển đổi nền.
Bây giờ đối với thiết kế văn bản tiêu đề, đây là các cài đặt -
- Phông chữ tiêu đề – Abhaya Libre
- Màu sắc – #415962
- Kích thước văn bản tiêu đề – 26px và 22px trên điện thoại di động
Đối với nội dung văn bản, hãy làm theo các cài đặt sau.
- Phông chữ tiêu đề – Open Sans
- Màu sắc – #879296
- Kích thước văn bản nội dung – 14px và 12px trên điện thoại di động
- Chiều cao đường cơ thể: 1,5em
Trong giai đoạn cuối cùng này, chúng tôi sẽ thêm Khoảng cách Blurb và CSS tùy chỉnh để tạo phông nền trắng cho vùng chứa nội dung và hoạt ảnh thu phóng cho ảnh nền.
Chuyển đổi nút chuyển đổi Khoảng cách thiết kế trong cài đặt Blurb.
- Phần đệm cho máy tính để bàn nên được thêm vào. 300px/1.5vw/1.5vw/1.5vw
- Phần đệm cho máy tính bảng nên được thêm vào. 220px/30px/30px/30px
- Phần đệm cho điện thoại di động nên được thêm vào. 200px/20px/20px/20px
Điều hướng đến tab Nâng cao và chọn hộp kiểm CSS tùy chỉnh.
Kích thước nền: 100%.
Chuyển nền sang trường Thành phần chính.
Tất cả các chuyển tiếp là 0,5 giây.
Khi di chuột, thêm kích thước nền và chuyển sang Thành phần chính.
kích thước nền 105%; Tất cả các chuyển tiếp là 0,5 giây.
Đối với màu nền, dán màu này vào trường CSS tùy chỉnh.
background-color: white;
padding: 30px 1.5vw;Ngoài ra, bạn cần thêm màu nền và phần đệm vào Trường nội dung Blurb khi di chuột.
background-color: white;
padding: 30px 4vw;
Bây giờ chúng ta đã hoàn thành mô-đun Lời giới thiệu, chúng ta có thể sao chép nó bao nhiêu lần tùy thích để thêm các lời giới thiệu mới vào băng chuyền của mình. Bạn chỉ cần thay chữ và thay đổi hình nền trong từng module đã sao chép.
Thanh trượt của chúng tôi gần như đã hoàn thành. Cuối cùng, chúng tôi sẽ thêm một số CSS tùy chỉnh để trang trí điều hướng và phân trang thanh trượt. Mã này có thể được đặt vào Divi/Tùy chọn chủ đề/CSS tùy chỉnh hoặc tệp style.css của chủ đề con của bạn.
/* DP Slider Navigation */
.dp-carousel .swiper-button-prev {
transform: none;
margin-top: -100px;
top: 10px !important;
margin-left: auto!important;
right: 52px;
font-size: 20px !important;
background-color: #fff;
padding: 25px !important;
}
.dp-carousel .swiper-button-next {
transform: none;
top: 10px !important;
margin-top:-100px;
right: 0px !important;
background-color: #fff;
padding: 25px !important;
}
/* Arrow Size and Style */
.swiper-button-next:after, .swiper-button-prev:after {
font-size: 20px;
color: #aed4e4;
}
/* DP Slider Pagination */
.dp-carousel .swiper-pagination-bullet-active {
background-color: #fff;
}
.dp-carousel .swiper-pagination-bullet {
background-color: #fff;
top: 15px;
}
Bây giờ đây là slide cuối cùng.
Từ cuối cùng
Tạo băng chuyền trong Divi mà không cần sử dụng plugin liên quan đến việc tận dụng chức năng tích hợp sẵn và các tùy chọn tùy chỉnh do chủ đề Divi cung cấp. Bằng cách làm theo quy trình này, bạn có thể tạo băng chuyền phù hợp với nội dung và tùy chọn thiết kế cụ thể của mình mà không cần dựa vào các plugin bổ sung.
