Make any elementor posts a slider

Share on facebook
Share on google
Share on twitter
Share on linkedin

Today I will show you how we can make any elementor post widget to slide. It will work in the default post skin and custom post skin as well.

So first add a section and add these class to that section by going section > advanced > css classes
blog_holder elementor-slick-slider

you can change that ‘blog_holder’ class to any class you want.

then set the number of column you want to show. lets say 3. and then set the number of post you wan to show. it must be greater than the number of column. set -1 to show all the posts.

Now we are all set. lets try to make the slider.

Elementor uses ‘slick slider’ to the slider widget so we will use slick slider code. so that it works perfectly.

Add the following JS and CSS code to your theme js and CSS file.

Here the .blog_holder is the class we have added to the section.

jQuery(document).ready(function(){
  jQuery('.blog_holder .elementor-posts ').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 1,
autoplay:true,
  });
});

.slick-initialized .slick-slide {
display: block !important;
}
.blog_holder .elementor-posts-container{
width:100%;
display:block !important}
.blog_holder article {
margin: 7px !important;
}
.blog_holder .slick-next:before, .blog_holder .slick-prev:before {
    color: #999;
}
Close Menu