/*jQuery scripts in footer*/
add_action('wp_footer', 'Scripts_in_footer');
function Scripts_in_footer()
{
?>
<script>
jQuery(document).ready(function(swiper) {
jQuery(".morebox .elementor-widget-container").addClass("swiper-container");
jQuery(".morebox .elementor-posts-container").addClass("swiper-wrapper");
jQuery(".morebox .elementor-post").addClass("swiper-slide");
jQuery('#morebox .swiper-container').append("<div class=\"swiper-pagination\"></div>");
var swiper = new Swiper('#morebox .swiper-container', {
slidesPerView: 1,
autoplay: false,
loop: true,
centeredSlides: true,
centeredSlidesBounds: true,
grabCursor: true,
breakpoints: {
310: {
centeredSlides: true,
centeredSlidesBounds: true,
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
},
slidesPerView: 2,
spaceBetween: 5,
},
640: {
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
},
slidesPerView: 4,
spaceBetween: 0,
},
768: {
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
},
slidesPerView: 4,
spaceBetween: 0,
},
1024: {
slidesPerView: 5,
spaceBetween: 10,
},
1624: {
slidesPerView: 8,
spaceBetween: 20,
mousewheel: true,
},
},
});
});
</script>
<?php
}
//// End of scripts in footer
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter