Hi,

Unfortunately, at the moment, we do not have a tiny-slider in our vue version.

To add the same example to Vue version you can follow the instructions below:

1. Install tiny-slider dependency by running command npm install tiny-slider.


2. Include tiny-slider styles on your component.
   
   
   copy

   <style lang="scss">
   @import "tiny-slider/dist/tiny-slider.css";
   </style>



3. Paste a slider code html code to your component.
   
   
   copy

   <div class="py-5">
    <div class="rounded border p-5 p-lg-15">
    <div class="tns tns-default">
    <!--begin::Slider-->
    <div data-tns="true" data-tns-loop="true" data-tns-swipe-angle="false" data-tns-speed="2000" data-tns-autoplay="true" data-tns-autoplay-timeout="18000" data-tns-controls="true" data-tns-nav="false" data-tns-items="3" data-tns-center="false" data-tns-dots="false" data-tns-prev-button="#kt_team_slider_prev1" data-tns-next-button="#kt_team_slider_next1">
    <!--begin::Item-->
    <div class="text-center px-5 py-5">
    <img :src="getAssetPath("/media/stock/600x400/img-1.jpg")" class="card-rounded mw-100" alt="">
    </div>
    <!--end::Item-->
   
    <!--begin::Item-->
    <div class="text-center px-5 py-5">
    <img :src="getAssetPath("/media/stock/600x400/img-1.jpg")" class="card-rounded mw-100" alt="">
    </div>
    <!--end::Item-->
   
    <!--begin::Item-->
    <div class="text-center px-5 py-5">
    <img :src="getAssetPath("/media/stock/600x400/img-1.jpg")" class="card-rounded mw-100" alt="">
    </div>
    <!--end::Item-->
   
    <!--begin::Item-->
    <div class="text-center px-5 py-5">
    <img :src="getAssetPath("/media/stock/600x400/img-1.jpg")" class="card-rounded mw-100" alt="">
    </div>
    <!--end::Item-->
   
    <!--begin::Item-->
    <div class="text-center px-5 py-5">
    <img :src="getAssetPath("/media/stock/600x400/img-1.jpg")" class="card-rounded mw-100" alt="">
    </div>
    <!--end::Item-->
   
    <!--begin::Item-->
    <div class="text-center px-5 py-5">
    <img :src="getAssetPath("/media/stock/600x400/img-1.jpg")" class="card-rounded mw-100" alt="">
    </div>
    <!--end::Item-->
    </div>
    <!--end::Slider-->
   
    <!--begin::Slider button-->
    <button class="btn btn-icon btn-active-color-primary">
    <span class="svg-icon svg-icon-3x">
    <inline-svg :src="getAssetPath("media/icons/duotune/arrows/arr074.svg")"></inline-svg>
    </span>
    </button>
    <!--end::Slider button-->
   
    <!--begin::Slider button-->
    <button class="btn btn-icon btn-active-color-primary">
    <span class="svg-icon svg-icon-3x">
    <inline-svg :src="getAssetPath("media/icons/duotune/arrows/arr071.svg")"></inline-svg>
    </span>
    </button>
    <!--end::Slider button-->
    </div>
    </div>
    </div>

   
   


4. Then you can reuse the slider init function from our HTML version.
   
   
   copy

   var createTinySliders = function () {
    if (typeof tns === "undefined") {
    return;
    }
   
    // Init Slider
    var initSlider = function (el) {
    if (!el) {
    return;
    }
   
    const tnsOptions = {};
   
    // Convert string boolean
    const checkBool = function (val) {
    if (val === "true") {
    return true;
    }
    if (val === "false") {
    return false;
    }
    return val;
    };
   
    // get extra options via data attributes
    el.getAttributeNames().forEach(function (attrName) {
    // more options; https://github.com/ganlanyuan/tiny-slider#options
    if (/^data-tns-.*/g.test(attrName)) {
    let optionName = attrName
    .replace("data-tns-", "")
    .toLowerCase()
    .replace(/(?:[\s-])\w/g, function (match) {
    return match.replace("-", "").toUpperCase();
    });
   
    if (attrName === "data-tns-responsive") {
    // fix string with a valid json
    const jsonStr = el
    .getAttribute(attrName)
    .replace(/(\w+<img alt="happy" src="https://devs.keenthemes.com/assets/media/smiles/happy.png">|(\w+ <img alt="happy" src="https://devs.keenthemes.com/assets/media/smiles/happy.png">/g, function (matched) {
    return """ + matched.substring(0, matched.length - 1) + "":";
    });
    try {
    // convert json string to object
    tnsOptions[optionName] = JSON.parse(jsonStr);
    } catch (e) {}
    } else {
    tnsOptions[optionName] = checkBool(el.getAttribute(attrName));
    }
    }
    });
   
    const opt = Object.assign(
    {},
    {
    container: el,
    autoplay: true,
    autoplayButtonOutput: false,
    },
    tnsOptions
    );
   
    if (el.closest(".tns")) {
    el.closest(".tns").classList.add("tns-initiazlied");
    }
   
    return tns(opt);
    };
   
    // Sliders
    const elements = Array.prototype.slice.call(
    document.querySelectorAll("[data-tns="true"]"),
    0
    );
   
    if (!elements) {
    return;
    }
   
    elements.forEach(function (el) {
    if (el.getAttribute("data-kt-initialized") === "1") {
    return;
    }
   
    initSlider(el);
   
    el.setAttribute("data-kt-initialized", "1");
    });
    };
   
    onMounted(() => {
    createTinySliders();
    });