Add Swiper.js for full Slider and Fancy Pagination Support

[smileBeda]

Perhaps as pagination, or separate ShortCode.

I have achieved great results with the current plugin already, but you can basically just load either all results, or a batch of, and then use Swiper to paginate. This is great but if you load 10K posts in a slider it would of course be cumbersome.

It would be great if we could use this as pagination also because they have cool effects.

As of now, this is how to use it with the plugin:
Enqueue stuff:

wp_enqueue_style('swiper', 'https://unpkg.com/swiper/swiper-bundle.min.css', array(), '6.8.2', 'screen');
wp_enqueue_script('swiper', 'https://unpkg.com/swiper/swiper-bundle.min.js', array(), '6.8.2', true);
wp_enqueue_script('your-swiper', plugin_dir_url( __FILE__ ) . 'js/tkt-search-and-filter-public.js', array('swiper'), false, true);

Then load a batch of posts with the plugin, for example like so:

<!-- some basic style -->
<style>body,html{position:relative;height:100%}body{background:#eee;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;color:#000;margin:0;padding:0}.swiper-container{width:100%;height:100%}.swiper-slide{text-align:center;font-size:18px;background:#fff;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center}.swiper-slide img{display:block;width:100%;height:100%;object-fit:cover}body{background:#000;color:#000}.swiper-container{width:100%;height:300px;margin-left:auto;margin-right:auto}.swiper-slide{background-size:cover;background-position:center}.mySwiper2{height:80%;width:100%}.mySwiper{height:20%;box-sizing:border-box;padding:10px 0}.mySwiper .swiper-slide{width:25%;height:100%;opacity:.4}.mySwiper .swiper-slide-thumb-active{opacity:1}.swiper-slide img{display:block;width:100%;height:100%;object-fit:cover}</style>

<!-- start the slider markup-->
<div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="swiper-container mySwiper2" >
  
  <!-- Load the full image on top of the thumbnails -->
  [tkt_scs_loop instance="slidermain" type="post" error="No Posts Found" pag_arg="slide" posts_per_page="-1" container="div" customclasses="swiper-wrapper"]
    <div class="swiper-slide"><img src="[tkt_scs_attachmentimage item='' url='' show='featured_image' width='' height='' size='full' icon='' filter='raw' sanitize='url_raw']"></div>
  [/tkt_scs_loop]
  <!-- Load the Swiper pagination markup -->
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>
<!-- load the thumbnails markup-->
<div thumbsSlider="" class="swiper-container mySwiper">
  <!-- Load the thumbnails images -->
  [tkt_scs_loop instance="slider" type="post" error="No Posts Found" pag_arg="slide" posts_per_page="-1" container="div" customclasses="swiper-wrapper"]
    <div class="swiper-slide"><img src="[tkt_scs_attachmentimage item='' url='' show='featured_image' width='' height='' size='thumbnail' icon='' filter='raw' sanitize='url_raw']"></div>
  [/tkt_scs_loop]
</div>

Then in your your-swiper JS initialise the SwiperJS:

(function( $ ) {
	'use strict';
	var swiper = new Swiper(".mySwiper", {
        spaceBetween: 10,
        slidesPerView: 4,
        freeMode: true,
        watchSlidesVisibility: true,
        watchSlidesProgress: true,
    });
    var swiper2 = new Swiper(".mySwiper2", {
        spaceBetween: 10,
        navigation: {
          	nextEl: ".swiper-button-next",
          	prevEl: ".swiper-button-prev",
        },
        thumbs: {
          	swiper: swiper,
        },
        autoplay: {
	   		delay: 2100,
	 	},
    });  
})( jQuery );

This loads a nice Swiper like seen in the movie below.

Screen.Recording.2021-08-17.at.16.51.32.mov