TinySliderExample.vue

<template>
  <div class="py-5">
    <div class="rounded border p-5 p-lg-15">
      <div class="tns tns-default tns-initiazlied">
        <!--begin::Slider-->
        <div
          ref="sliderRef"
          class="slider"
          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
          id="kt_team_slider_prev1"
          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
          id="kt_team_slider_next1"
          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>
</template>

<script lang="ts">
import { getAssetPath } from "@/core/helpers/assets";
import { nextTick, onMounted, ref } from "vue";
import { defineComponent } from "vue";
import { tns, type TinySliderSettings } from "tiny-slider/src/tiny-slider";

export default defineComponent({
  name: "main-dashboard",
  components: {},
  setup() {
    const sliderRef = ref(null);

    var initTinySlider = 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+:)|(\w+ :)/g, function (matched) {
                return '"' + matched.substring(0, matched.length - 1) + '":';
              });
            try {
              // convert json string to object
              tnsOptions[optionName] = JSON.parse(jsonStr);
            } catch (e) {
              console.log("errr", e);
            }
          } else {
            tnsOptions[optionName] = checkBool(el.getAttribute(attrName));
          }
        }
      });

      const opt: TinySliderSettings = Object.assign(
        {},
        {
          container: el,
          slideBy: 1,
          autoplay: true,
          center: true,
          autoplayButtonOutput: false,
        },
        tnsOptions
      );

      return tns(opt);
    };

    onMounted(() => {
      nextTick(() => {
        initTinySlider(sliderRef.value);
      });
    });

    return {
      getAssetPath,
      sliderRef,
    };
  },
});
</script>

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