tukutoi / tukutoi-search-and-filter Goto Github PK

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);

<!-- 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>

(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 );