Những Sai Lầm Phổ Biến Trong Thiết Kế Logo
Thiết kế logo là một trong những bước quan trọng nhất trong việc xây dựng thương hiệu. Logo không chỉ là biểu tượng nhận diện
Font Chữ Và Cách Chọn Kiểu Chữ Chuẩn Cho Từng Ngành Nghề
Trong thiết kế thương hiệu, font chữ đóng vai trò không kém phần quan trọng so với màu sắc hay hình ảnh. Font chữ không
Tầm Quan Trọng Của Thiết Kế Catalogue Trong Thời Đại Số
Trong bối cảnh công nghệ số phát triển mạnh mẽ, nhiều doanh nghiệp có xu hướng chuyển mình sang các phương thức truyền thông hiện
Ý Nghĩa Màu Sắc Trong Thiết Kế Thương Hiệu
Màu sắc không chỉ đơn thuần là một phần của thiết kế, mà còn là một yếu tố quan trọng trong việc xây dựng thương
5 Xu Hướng Thiết Kế Nhận Diện Thương Hiệu 2024
Trong thế giới kinh doanh hiện đại, thiết kế nhận diện thương hiệu không chỉ là yếu tố quan trọng trong chiến lược marketing mà
Quy Trình Thiết Kế Bộ Nhận Diện Thương Hiệu Hoàn Chỉnh
Trong bối cảnh cạnh tranh khốc liệt hiện nay, việc thiết kế một bộ nhận diện thương hiệu hoàn chỉnh không chỉ là một nhiệm
This javascript snippet help to change any default post widget on elementor to slider using Swiper.js 8.
Important: change IS of the widget to post-slider (#post-slider)
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script>
jQuery(document).ready(function () {
//change the id of post widget to post-slider
$("#post-slider > div").attr('class', '').addClass("swiper");
$("#post-slider > div > div").attr('class', '').addClass("swiper-wrapper");
$("#post-slider > div > div > article").attr('class', '').addClass("swiper-slide");
//add pagination
$(".swiper-wrapper").after(" <div class='swiper-pagination'></div>");
//add navigation
$(".swiper").after(
" <div class='swiper-button-prev'></div><div class='swiper-button-next'></div>"
);
//add scrollbar
// $(".swiper-wrapper").after(" <div class='swiper-scrollbar'></div>");
//khai báo để slider xuất hiện
const swiper = new Swiper(".swiper", {
// Default parameters
slidesPerView: 3,
spaceBetween: 10,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
},
// Responsive breakpoints
breakpoints: {
// when window width is >= 320px
320: {
slidesPerView: 1,
spaceBetween: 20,
navigation: false,
},
// when window width is >= 480px
480: {
slidesPerView: 2,
spaceBetween: 30,
navigation: false,
},
// when window width is >= 640px
640: {
slidesPerView: 3,
spaceBetween: 40,
},
},
});
});
</script>
<style>
#post-slider .swiper-button-prev{
left:-50px;
}
#post-slider .swiper-button-next{
right:-50px;
}
</style>
If you need Navigation arrows, use the below:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script>
jQuery(document).ready(function () {
//change the id of post widget to post-slider
$("#post-slider > div").attr('class', '').addClass("swiper");
$("#post-slider > div > div").attr('class', '').addClass("swiper-wrapper");
$("#post-slider > div > div > article").attr('class', '').addClass("swiper-slide");
//khai báo để slider xuất hiện
const swiper = new Swiper(".swiper", {
// Default parameters
slidesPerView: 3,
spaceBetween: 10,
// Responsive breakpoints
breakpoints: {
// when window width is >= 320px
320: {
slidesPerView: 1,
spaceBetween: 20,
},
// when window width is >= 480px
480: {
slidesPerView: 1,
spaceBetween: 30,
},
// when window width is >= 640px
640: {
slidesPerView: 1,
spaceBetween: 40,
},
},
});
});
</script>
Vietnamese 