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