Elementor posts slider with Swiper is an easy way to slide almost any element.
As the Swiper script is already in the Elementor Library, what we need is to add a class on the section with the elements that we want to slide, and 2 pieces of code (one jQuery and one CSS).
In our tutorial, we will use the blog widget to slide posts, just follow these 3 steps:
STEP 1
Create a new Section and add in Advanced tad > CSS Classes: “post_slide”
STEP 2
Add this code to an HTML widget inside the same section under the Posts widget
<script>
jQuery(document).ready(function ($) {
$(".post_slide .elementor-widget-container").addClass("swiper-container");
$(".post_slide .elementor-posts-container").addClass("swiper-wrapper");
$(".post_slide .elementor-post").addClass("swiper-slide");
$('.swiper-container').append('<div class="swiper-pagination"></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div>');
var swiper = new Swiper('.post_slide .swiper-container', {
slidesPerView: 1,
autoplay: true,
breakpoints: {
640: {
slidesPerView: 1,
spaceBetween: 15,
},
768: {
slidesPerView: 2,
spaceBetween: 15,
},
1024: {
slidesPerView: 4,
spaceBetween: 15,
},
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
});
</script>STEP 3
Add this CSS to the Section > Advanced tab > Custom CSS
.post_slide .swiper-wrapper {
display: flex !important;
flex-wrap: inherit;
margin: 0px 0 50px;
}
.post_slide .elementor-element {
--grid-column-gap: 0 !important;
}
.post_slide .elementor-widget-container .elementor-posts-container .elementor-post {
height: auto;
}
.post_slide .swiper-button-next, .post_slide .swiper-button-prev {
top:inherit;
bottom: 0px;
width: 10px;
height: 30px;
}
.post_slide .swiper-button-prev {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E") !important;
}
.post_slide .swiper-button-next {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E") !important;
}
.post_slide .swiper-pagination-bullet {
width: 15px;
height: 3px;
border-radius: 0;
}