How to Make elementor post slider without any plugin

0

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 give it a class to it ( advanced > css classes ). In my case lets say the class it “blog_holder
But we need to add another class to it as well. It will be called “elementor-slick-slider”.
Elementor uses Slick slider by default. Adding this class will help us will some styling. So in css class field we have to add “blog_holder elementor-slick-slider”

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

Add the post widget to the section.

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.

We need to add some JS(jQuery)and css codes. So use your css and js editor. If we visit to Slick slider documentation we will find how to use it. the codes are like following
jQuery(document).ready(function(){
jQuery('.your-class').slick({
setting-name: setting-value
});
});
In the code where it says “.your-class” we need to insert our class name. and where it says “setting name: setting-value” we need to insert our setting for our slider. So lets try to set it up.
jQuery(document).ready(function(){
jQuery('.blog_holder .elementor-posts ').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
autoplay:true,
});
});

Please note
– We also need to add “.elementor-posts” class in here as Elementor wraps the post with that class.
– “infinite: true” means the slider will loop infinitely.
– “slidesToShow” indicates number of post you want to show at a time.

– “slidesToScroll” means the number of post will change at a time.

– “autoplay:true” means slider will play automatically.

The following CSS will help to style the slider better
.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;
}

Share this post

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest

This Post Has 5 Comments

  1. hi avro, thank you for this tutorial. i was wondering if there is a way I can insert the js code when using hemlock theme

    1. I used the Easy Code Snippet plugin which inserted the code but I still cannot get it to work.

  2. Help me, I cannot get this working at all.I have followed your instructions, but do not understand why it is not working.
    my test site is dev.boxdproductions.co.uk/front-page

    1. Seems just as you were developing this, Elementor was moving to Swiper from Slick.

  3. Just noticed, this is the problem
    Uncaught TypeError: jQuery(…).slick is not a function
    at HTMLDocument. ((index):71)
    at i (jquery.js?ver=1.12.4-wp:2)
    at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4-wp:2)
    at Function.ready (jquery.js?ver=1.12.4-wp:2)
    at HTMLDocument.J (jquery.js?ver=1.12.4-wp:2)

Leave a Reply

Close Menu
This website uses cookies to provide you with the best service. By using our website, you agree to use the cookie. Learn More