How to create an AJAX Slider with the TukuToi Search and Filters Plugin

Creating sliders with the TukuToi Search and Filters plugin is very easy. You can do it in two ways: either using some external libraries such as Swiper.js or with a native pagination provided by TukuToi Search and Filters Plugin. In this document we will show example snippets for both cases.

Using Swiper.js

Note that the best approach would be to enqueue the scripts and styles the “ClassicPress way” and not in the HTMl as we do it in this example. This means, you’d add them in the header and footer respectively. But for the sake of simplicity, they are added directly in the HTML in this example, to get you started quickly. You should add this code as usual to a Template, then either insert it with the Template ShortCode into a page, post or other template.

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"/>
<style>
    .swiper {
    width: 100%;
    height: 100%;
    }
    .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    /* Center slide text vertically */
    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;
    }
    .swiper {
    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: 0.4;
    }
    .mySwiper .swiper-slide-thumb-active {
    opacity: 1;
    }
    .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    }
</style>
<div class="container">
    <div class="row">
        <div class="col" style="max-height: 600px;">
            <div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="swiper mySwiper2">
                [tkt_scs_loop instance="slider" type="post" error="No Posts Found" pag_arg="pag" posts_per_page="-1" container="div" customclasses="swiper-wrapper"]tkt_base64_dGt0X2Jhc2U2NF9kR3QwWDJKaGMyVTJORjlZVVRCTFNVTkJaMGxEUVdkSlEwRm5TVU5CWjBsRFFXZEpRMXB6WkVSMGEyRllXV2RaTW5ob1l6Tk5PVWx1VGpOaFdFSnNZMmt4ZW1KSGJHdGFVMGx0V2pOUk4wUlJiMmRKUTBGblNVTkJaMGxEUVdkSlEwRm5TVU5CWjBsRFFXZEpRMXB6WkVSMGVtTkhSblZKUjA1eldWaE9lbEJUU2pCaFdGSnpXbE5DZDB4VVZXZFpiV04wV2tkR2VXRjVRakJhV0dnd1RGaGtiMkZZVW14SlNFSjJZekpzTUdGWE9YVk1WMFpwWXpJNWMyUllVbXhKYVZwdVpFUjBZbGN6VW5Ka1JqbDZXVE5PWm1OSE9YcGtSMngxV20wNFoyRllVbXhpVkRCcFNXbENlbUZIT1ROUVUwcDNZak5PTUZnelVuQmtSM2hzU1dsQ2JXRlhlREJhV0VrNVNXNUthR1I1U1dkak1rWjFZVmhTY0dWdFZUbEpibEpzWlVoU1pscHRiR3hpUjFGcFdGWXdiV0pJVVRkTU0wNTNXVmMwYlZvelVUZEVVVzluU1VOQlowbERRV2RKUTBGblNVTkJaMGxEUVdkSlEwRm5TVU5hYzJSRWRIQmlWMk5uWXpOS2FsQlRTbUpYTTFKeVpFWTVlbGt6VG1aWldGSXdXVmRPYjJKWFZuVmtSMngwV1Zka2JFbEhiREJhVnpBNVNubGpaMlJZU25OUVUyTnVTVWhPYjJJell6bEtNbHBzV1ZoU01XTnRWbXRZTW14MFdWZGtiRXA1UWpOaFYxSXdZVVF3YmtwNVFtOWFWMnh1WVVoUk9VcDVZMmRqTW13MldsUXdibUpIUm5sYU1sVnVTVWRzYW1JeU5EbEtlV05uV20xc2MyUkhWbmxRVTJSNVdWaGpia2xJVG1oaWJXd3dZVmh3YkZCVFpERmpiWGhtWTIxR00wb3hNV1JKYVVGMlNtMWtNRTkzTUV0SlEwRm5TVU5CWjBsRFFXZEpRMEZuU1VOQlowbERXbk5rUkhOMldrZHNNa3B0WkRCUGR6QkxTVU5CWjBsRFFXZEpRMEZuU1VOQlowbERRV2RKUm5NOQ==[/tkt_scs_loop]
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
            <div thumbsSlider="" class="swiper mySwiper">
                [tkt_scs_loop instance="slider" type="post" error="No Posts Found" pag_arg="pag" posts_per_page="-1" container="div" customclasses="swiper-wrapper"]tkt_base64_dGt0X2Jhc2U2NF9kR3QwWDJKaGMyVTJORjlZVVRCTFNVTkJaMGxEUVdkSlEwRm5TVU5CWjBsRFFXZEpRMXB6WkVSMGEyRllXV2RaTW5ob1l6Tk5PVWx1VGpOaFdFSnNZMmt4ZW1KSGJHdGFVMGx0V2pOUk4wUlJiMmRKUTBGblNVTkJaMGxEUVdkSlEwRm5TVU5CWjBsRFFXZEpRMXB6WkVSMGNHSlhZMmRqTTBwcVVGTktZbGN6VW5Ka1JqbDZXVE5PWmxsWVVqQlpWMDV2WWxkV2RXUkhiSFJaVjJSc1NVZHNNRnBYTURsS2VXTm5aRmhLYzFCVFkyNUpTRTV2WWpOak9Vb3lXbXhaV0ZJeFkyMVdhMWd5YkhSWlYyUnNTbmxDTTJGWFVqQmhSREJ1U25sQ2IxcFhiRzVoU0ZFNVNubGpaMk15YkRaYVZEQnVXbTFXYUdSSVZubGFWMUptWVZjeGFGb3lWVzVKUjJ4cVlqSTBPVXA1WTJkYWJXeHpaRWRXZVZCVFpIbFpXR051U1VoT2FHSnRiREJoV0hCc1VGTmtNV050ZUdaamJVWXpTakV4WkVscFFYWktiV1F3VDNjd1MwbERRV2RKUTBGblNVTkJaMGxEUVdkSlEwRm5TVU5hYzJSRWMzWmFSMnd5U20xa01FOTNNRXRKUTBGblNVTkJaMGxEUVdkSlEwRm5TVU5CWjBsR2N6MD0=[/tkt_scs_loop]
            </div>
        </div>
    </div>
</div>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
    var swiper = new Swiper(".mySwiper", {
      spaceBetween: 10,
      slidesPerView: 4,
      freeMode: true,
      watchSlidesProgress: true,
    });
    var swiper2 = new Swiper(".mySwiper2", {
      spaceBetween: 10,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      thumbs: {
        swiper: swiper,
      },
    });
</script>

Using TukuToi Search and Filters Plugin native pagination

In this case, we are going to use TukuToi Search and Filter’s powerful pagination feature, without relying on external scripts. This also allows you to determine the amount of items more granularly, and simply avoids loading a large script. This slider will be AJAX driven, but you can of course also load it with a full page reload.

<div class="container">
    <div class="row">
        <div class="col d-flex justify-content-center">
            [tkt_scs_searchtemplate type="ajax" customid="" customclasses="" instance="slider_native"]][[/tkt_scs_searchtemplate]
            [tkt_scs_loop instance="slider_native" type="post" error="No Posts Found" pag_arg="slide" posts_per_page="1" container="div" customclasses="slider-native"]tkt_base64_dGt0X2Jhc2U2NF9kR3QwWDJKaGMyVTJORjlZVVRCTFNVTkJaMGxEUVdkSlEwRm5TVU5CWjBwdGVEQlBNbXgwV25sQ2VtUkliSE5hVkRCcFlsZEdORXhYYUd4aFYyUnZaRVJ2WjA1VVFYZGpTR2MzU1dsQ2VtTnRUVGxKYkhSaVpFZDBNRmd6VG1wak1UbG9aRWhTYUZreWFIUmFWelV3WVZjeGFGb3lWV2RoV0ZKc1lsUXdia3A1UWpGamJYYzVTbmxqWjJNeWFIWmtlakJ1V20xV2FHUklWbmxhVjFKbVlWY3hhRm95Vlc1SlNHUndXa2hTYjFCVFkyNUpSMmhzWVZka2IyUkVNRzVLZVVKNllWaHdiRkJUWkhSYVYxSndaRmN3YmtsSGJHcGlNalE1U25saloxcHRiSE5rUjFaNVVGTmtlVmxZWTI1SlNFNW9ZbTFzTUdGWWNHeFFVMlF4WTIxNFptTnRSak5LTVRGa1NXbEJka3B0WkRCUGR6QkxTVU5CWjBsRFFXZEpRMEZuU1VOQloxZDNQVDA9[/tkt_scs_loop]
        </div>
    </div>
    <div class="row">
        <div class="col pt-3">
            [tkt_scs_pagination instance="slider_native" pag_arg="slide" show_all="true" end_size="1" mid_size="2" prev_next="true" prev_text="Pre" next_text="Next" type="list" before_page_number="" after_page_number="" aria_current="page" ul_classes="pagination" li_classes="test" a_classes="page-link" current_classes="active page-link" container="div" containerclasses="d-flex pagination-container justify-content-center " add_args="" add_fragment=""]
        </div>
    </div>
</div>