Metronic Mega Update!Tailwind 4, React 19, Next.js 15, KtUI, ReUI, eCommerce, User Management Apps and more
Explore Update

tiny slider


hi,

do you have any vue component where tiny slider (https://preview.keenthemes.com/html/metronic/docs/general/tiny-slider/advanced) is used? i tried to follow the documentation, but couldn't make it work.


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


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.

    <style lang="scss">
    @import "tiny-slider/dist/tiny-slider.css";
    </style>
  3. Paste a slider code 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;
    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();
    });




Regards,
Lauris Stepanovs,
Keenthemes Support Team
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  :(
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  :(