How to create post slider without any plugins in Elementor (swiper slider method)

/*** JS *****/
jQuery(document).ready(function( $ ){
jQuery(".post_slide .elementor-widget-container").addClass("swiper-container");
jQuery(".post_slide .elementor-posts-container").addClass("swiper-wrapper");
jQuery(".post_slide .elementor-post").addClass("swiper-slide");
jQuery('.swiper-container').append('<div class="swiper-pagination"></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div>');

var swiper = new Swiper('.swiper-container', {
spaceBetween: 30,
slidesPerView: 3,
autoplay:true,
breakpoints: {
640: {
slidesPerView: 1,
spaceBetween: 20,
},
768: {
slidesPerView: 1,
spaceBetween: 40,
},
1024: {
slidesPerView: 2,
spaceBetween: 50,
},
},


pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},

});

});


/*** CSS *****/

.swiper-wrapper {
display: flex !important;
flex-wrap: inherit;
}

thanks dude, your help my life, have great day bro 🙌

Hi, how to get it work with "Improved Asset Loading"?

The pagination and navigation arrows appear in the heading, images, title, etc. or each blog post. Please help.

Hi, thank you for the tutorial, but I can't get it to work in the most recent Elementor/WordPress versions. All containers and classes seem unchanged, but doesn't work. Thanks.

Hello @Avro, amazing video, It works in backend editor of Elementor, but on live preview doesnt, do you know where can be the problem ?

thanks you bro

It doesn't work in Elementor 3.5.0

Is this working in 2022? mine just stop working

If I want a lightbox when click in image, How do it?

Can someone help, I only have 1 slide showing :(

Avro thanks for this, with Elementor Improved Asset loading feature turned on this no longer works, could you please update?

brother can you made an updated tutorial for this .... alot have changed in elementor and unfortunately its not working :(

Hey Avro, I followed every step and copy paste your code, but it doesn't slide for me, I make the one slide per row also added the arrows, but it doesn't work. Can you help, please? Also I noticed that you are writing the JS code into Style section for CSS. Is that something that I need to work on. Please help ASAP @avro.

very nice..This guy knows how to use js.

There is one issue. On a mobile screen, every time a slide appears leaves some space on the left side of the scree and eventually the later slides does not even appear completely leaving some good empty spaces on the left. Is there any solution to this?

Hi I added this for my product slider in homepage, but there is a slight delay in the beginning,
My horizontal slider shows in the vertical form in the beginning,
After I scrolling all the way down the site comes back to Horizontal Scroll Slider,

good job man

I'm trying to do it with HTmega post following all the steps but it's not working at all. The JS code I've applied is:

\\\\\\\\\\\\\\\\\\\\\------

jQuery(document).ready(function( $ ){

jQuery(".post_slide .elementor-widget-container").addClass("swiper-container");

jQuery(".post_slide .eael-post-grid-container").addClass("swiper-wrapper");

jQuery(".post_slide .eael-grid-post eael-post-grid-column").addClass("swiper-slide");

jQuery('.swiper-container').append('<div class="swiper-pagination"></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div>');

var swiper = new Swiper('.swiper-container', {

spaceBetween: 300,

slidesPerView: 3,

autoplay:true,

breakpoints: {

640: {

slidesPerView: 1,

spaceBetween: 20,

},

768: {

slidesPerView: 1,

spaceBetween: 40,

},

1024: {

slidesPerView: 3,

spaceBetween: 50,

},

},

pagination: {

el: '.swiper-pagination',

clickable: true,

\\\\\\\\\\\\\\\\\\\\\--------

Somehow this JS script doesn't apply the swiper classes

I come here after 1 year and I love you for this tut. Thx for the upgrading:—)

Alignments are bit off when i did this. Does anyone have any fix ?

I thought your Slick version was good, but this is better.
How do I remove the pagination completely?
Many thanks

Pete

how can we disable that dots in that slider?

pagination not came properly in my website

Does this swipe? On mobile

Nice tutorial! Do you know how to add custom fields to show it in a grid? For example price or something like that?

Hey, the arrows applied to everywhere else I used the media slider in the website. How to undo for other sliders on the website?

Hey there. Thank you so much for this. It's fantastic. I followed your instructions but it's targeting all the elements that slide, like testimonial slider but not the posts that I set up target. Is there something I have missed?

Is this working with a loop?

waiting for more tutorial like this bro

Thank you for your help! Very good video ....

Thank you

tried to do this to make a product slider but failed it ó.ò. Have some tips?

great ...greetings from CUBA

Hiie i tried with the custom loop post and its not working..Can you tell me how can i achieve for the custom loop post.?

Avro, thank you very much! Ur lessons 👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻

why slider stop when click on arrow left or right ?

how we can set slide to infinite loop?

how we can remove bullets?

how we can make arrows clickable???

how we can make arrows clickable

I had some problems, but everything works fine now. One strange thing though when you don't want to use the custom CSS & JS plugin. When you add the JS and CSS in an HTML widget, the navigations are added a second time to the HTML widget?! Why is that and is there a way to prevent this?

hi, can you tell me that how we can embed this code in just specific page ?

Hi, thankyou for your wonderful videos I watch them all and all so useful.
Please could you help in creating vertical and horizontal slider with nested content using Elementor pro or other way please.
Swiper slider has this but I don't see if this can be achieved with elementor?

Thanks and have a great weekend 😊

i have set the post slide , it works well, Thanks
one issue remaining , the slide showing 4 pagination arrows and 4 dots , why?, it must be 2 arrows and 2 dots

can you tell me where to place outside arrow code? its urgent

sorry works well , thanks

its not work

Always the best

YES!!! THANK YOU VERY MUCH!