Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

Using tiny slider in Metronic Vue


  1. Install tiny-slider dependency by running command npm install tiny-slider.
  2. Include tiny-slider styles on your component.

    <style lang="scss">
    @import "tiny-slider/dist/tiny-slider.css";
    </style>
  3. Paste a slider html code to your component.

    <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")"
    />
    </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")"
    />
    </span>
    </button>
    <!--end::Slider button-->
    </div>
    </div>
    </div>

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

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



If you encounter any problems you can find working component example in this gist file. https://gist.github.com/laurisstepanovs/dca0824c8cf2889ebb959762ed39a358
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (0)