< Back to Code

Turn default elementor posts to carousel posts without plugin

This javascript snippet help to change any default post widget on elementor to slider using Swiper.js 8.

Important: change IS of the widget to post-slider (#post-slider)

				
					<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>



<link

      rel="stylesheet"

      href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"

    />



    <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

<script>

       jQuery(document).ready(function () {



           //change the id of post widget to post-slider

           $("#post-slider > div").attr('class', '').addClass("swiper");

           $("#post-slider > div > div").attr('class', '').addClass("swiper-wrapper");

           $("#post-slider > div > div > article").attr('class', '').addClass("swiper-slide");

//add pagination
      $(".swiper-wrapper").after("  <div class='swiper-pagination'></div>");

      //add navigation
      $(".swiper").after(
        "  <div class='swiper-button-prev'></div><div class='swiper-button-next'></div>"
      );

      //add scrollbar
    //  $(".swiper-wrapper").after("    <div class='swiper-scrollbar'></div>");




        //khai báo  để slider xuất hiện

        const swiper = new Swiper(".swiper", {

          // Default parameters

          slidesPerView: 3,

          spaceBetween: 10,
          
          navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
  },

          // Responsive breakpoints

          breakpoints: {

            // when window width is >= 320px

            320: {

              slidesPerView: 1,

              spaceBetween: 20,
            navigation: false,


            },

            // when window width is >= 480px

            480: {

              slidesPerView: 2,

              spaceBetween: 30,
              navigation: false,

            },

            // when window width is >= 640px

            640: {

              slidesPerView: 3,

              spaceBetween: 40,

            },

          },

        });

});

</script>
<style>
    #post-slider .swiper-button-prev{
        left:-50px;
        
    }
    
        #post-slider .swiper-button-next{
        right:-50px;
        
    }
</style>
				
			

If you need Navigation arrows, use the below:

				
					 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 

  

<link 

      rel="stylesheet" 

      href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" 

    /> 

  

    <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script> 

<script> 

       jQuery(document).ready(function () { 

            

           //change the id of post widget to post-slider 

         

           $("#post-slider > div").attr('class', '').addClass("swiper");

           $("#post-slider > div > div").attr('class', '').addClass("swiper-wrapper");

           $("#post-slider > div > div > article").attr('class', '').addClass("swiper-slide");

            

         

        //khai báo  để slider xuất hiện 

        const swiper = new Swiper(".swiper", { 

          // Default parameters 

          slidesPerView: 3, 

          spaceBetween: 10, 

          // Responsive breakpoints 

          breakpoints: { 

            // when window width is >= 320px 

            320: { 

              slidesPerView: 1, 

              spaceBetween: 20, 

            }, 

            // when window width is >= 480px 

            480: { 

              slidesPerView: 1, 

              spaceBetween: 30, 

            }, 

            // when window width is >= 640px 

            640: { 

              slidesPerView: 1, 

              spaceBetween: 40, 

            }, 

          }, 

        }); 

}); 

</script> 
				
			

© Copyright by JAYbranding – All rights reserved.

We would like to advise you in more detail.
Please enter information to receive a consultation