< Back to Code

Turn default elementor posts to carousel posts without plugin

Payment Method

Khách hàng vui lòng chọn hình thức thanh toán phù hợp: Chuyển khoản tài khoản cá nhân (giao dịch dưới 20tr) Ngân hàng Quân Đội

Read More »

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 type="litespeed/javascript" data-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 type="litespeed/javascript" data-src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script> <script type="litespeed/javascript">jQuery(document).ready(function(){$("#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");$(".swiper-wrapper").after("  <div class='swiper-pagination'></div>");$(".swiper").after("  <div class='swiper-button-prev'></div><div class='swiper-button-next'></div>");const swiper=new Swiper(".swiper",{slidesPerView:3,spaceBetween:10,navigation:{nextEl:".swiper-button-next",prevEl:".swiper-button-prev",},pagination:{el:'.swiper-pagination',type:'bullets',},breakpoints:{320:{slidesPerView:1,spaceBetween:20,navigation:!1,},480:{slidesPerView:2,spaceBetween:30,navigation:!1,},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 type="litespeed/javascript" data-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 type="litespeed/javascript" data-src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script> <script type="litespeed/javascript">jQuery(document).ready(function(){$("#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");const swiper=new Swiper(".swiper",{slidesPerView:3,spaceBetween:10,breakpoints:{320:{slidesPerView:1,spaceBetween:20,},480:{slidesPerView:1,spaceBetween:30,},640:{slidesPerView:1,spaceBetween:40,},},})})</script> 
				
			

vi

© Copyright by JAYbranding – All rights reserved.

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