Elementor posts slider with Swiper

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;
}
Scroll to Top