Hello, I have a piece of code that is a draggable slider
And I just need next and previous buttons to be added to it in mobile mode
var headerspan = CSSRulePlugin.getRule(".textimgtitle::after");
tl.fromTo(headerspan, { width: "100%", ease: 'Power2.easeInOut' }, { width: "0%", duration: 0.8, delay: 0.6 }, )
//100vh Fix on Mobile
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty("--vh", `${vh}px`);
window.addEventListener("resize", () => {
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty("--vh", `${vh}px`);
});
(() => {
var t = {
465: (t, e) => {
Object.defineProperty(e, "__esModule", { value: !0 }),
(e.default = function () {
return (
!("undefined" == typeof window || !("ontouchstart" in window || (window.DocumentTouch && "undefined" != typeof document && document instanceof window.DocumentTouch))) ||
!("undefined" == typeof navigator || (!navigator.maxTouchPoints && !navigator.msMaxTouchPoints))
);
}),
(t.exports = e.default);
},
},
e = {};
function i(s) {
var n = e[s];
if (void 0 !== n) return n.exports;
var r = (e[s] = { exports: {} });
return t[s](r, r.exports, i), r.exports;
}
(i.n = (t) => {
var e = t && t.__esModule ? () => t.default : () => t;
return i.d(e, { a: e }), e;
}),
(i.d = (t, e) => {
for (var s in e) i.o(e, s) && !i.o(t, s) && Object.defineProperty(t, s, { enumerable: !0, get: e[s] });
}),
(i.o = (t, e) => Object.prototype.hasOwnProperty.call(t, e)),
(() => {
"use strict";
var t = i(465);
const e = i.n(t)()(),
s = { dragStart: e ? "touchstart" : "mousedown", drag: e ? "touchmove" : "mousemove", dragEnd: e ? "touchend" : "mouseup" };
class n {
constructor(t) {
(this.element = t),
this.element &&
((this.isDisabled = !0),
(this.isDragging = !1),
(this.startX = 0),
(this.currentX = 0),
(this.previousX = 0),
(this.offset = 0),
(this.dragX = 0),
(this.container = this.element.querySelector(".elastic-slider__container")),
(this.slides = [...this.element.querySelectorAll(".elastic-slider__item")]),
this.check(),
this.init());
}
check = () => {
(this.carouselWidth = this.element.getBoundingClientRect().width),
(this.wrapperWidth = 0),
this.slides.forEach((t) => {
this.wrapperWidth += t.getBoundingClientRect().width;
}),
this.wrapperWidth <= this.carouselWidth ? (this.isDisabled = !0) : (this.isDisabled = !1),
(this.stepX = (this.carouselWidth - this.wrapperWidth) / this.slides.length);
};
reset() {
this.currentX = 0;
}
update() {
this.element &&
((this.current = Math.ceil(-this.currentX / this.stepX)),
this.slides.forEach((t, e) => {
const i = e - this.current;
gsap.to(t, { x: this.currentX, duration: 1 + 0.1 * i, ease: "expo.out" });
}));
}
init() {
window.addEventListener("resize", this.check),
(this.element.style.touchAction = "pan-y"),
(this.element.style.transformStyle = "preserve-3d"),
this.element.addEventListener(s.dragStart, (t) => {
(this.startX = (e ? t.touches[0].clientX : t.clientX) - this.currentX), (this.isDragging = !0);
}),
this.element.addEventListener(s.drag, (t) => {
this.isDragging &&
!this.isDisabled &&
((this.currentX = (e ? t.touches[0].clientX : t.clientX) - this.startX),
(this.currentX = gsap.utils.clamp(-1 * (this.wrapperWidth - this.element.parentElement.getBoundingClientRect().width), 0, this.currentX)));
}),
this.element.addEventListener(s.dragEnd, () => {
this.isDragging = !1;
}),
window.addEventListener(s.dragEnd, () => {
this.isDragging = !1;
});
}
}
new (class {
constructor() {
(this.carousels = [...document.querySelectorAll(".elastic-slider")]), (this.instances = []);
for (const t of this.carousels) this.instances.push(new n(t));
this.init();
}
update = () => {
for (const t of this.instances) t.update();
};
init() {
gsap.ticker.add(this.update);
}
})();
})();
})();
//# sourceMappingURL=bundle.js.map
<div class="core-slider">
<div class="core-wrap elastic-slider w-dyn-list">
<div role="list" class="core-list elastic-slider__container w-dyn-items">
<div role="listitem" class="core-item elastic-slider__item w-dyn-item">
<div class="core-inner">
<div class="core-content"><img src="/img/about/web.jpg" loading="lazy" draggable="false" alt="" class="img full" /></div>
</div>
<div class="core-col">
<div class="core-col__inner">
<div class="core-col__eyebrow">
<div class="text eyebrow var">DEVELOPMENT</div>
</div>
<h5 class="h-h5 var">Technical excellency</h5>
<div class="text var small ch-text">
<div class="text var small">
Our agile engineering practices will bring software craftsmanship, quality, and consistency to the table, all in a flexible state to guarantee ever-changing requirements.
</div>
</div>
</div>
<div class="core-col__index">
<div class="core-numb">1</div>
</div>
</div>
</div>
<div role="listitem" class="core-item elastic-slider__item w-dyn-item">
<div class="core-inner">
<div class="core-content"><img src="/img/about/app.jpg" loading="lazy" draggable="false" alt="" class="img full" /></div>
</div>
<div class="core-col">
<div class="core-col__inner">
<div class="core-col__eyebrow">
<div class="text eyebrow var">TRUST</div>
</div>
<h5 class="h-h5 var">Full transparency</h5>
<div class="text var small ch-text">
<div class="text var small">We believe that there is nothing more important for trusting relationships than honesty and transparency whatever the circumstance.</div>
</div>
</div>
<div class="core-col__index">
<div class="core-numb">2</div>
</div>
</div>
</div>
<div role="listitem" class="core-item elastic-slider__item w-dyn-item">
<div class="core-inner">
<div class="core-content"><img src="/img/about/ui-ux.jpg" loading="lazy" draggable="false" alt="" class="img full" /></div>
</div>
<div class="core-col">
<div class="core-col__inner">
<div class="core-col__eyebrow">
<div class="text eyebrow var">VALUE</div>
</div>
<h5 class="h-h5 var">Consulting</h5>
<div class="text var small ch-text">
<div class="text var small">Our consulting experts will help you cut costs and streamline your processes.</div>
</div>
</div>
<div class="core-col__index">
<div class="core-numb">3</div>
</div>
</div>
</div>
<div role="listitem" class="core-item elastic-slider__item w-dyn-item">
<div class="core-inner">
<div class="core-content"><img src="/img/about/seo.jpg" loading="lazy" draggable="false" alt="" class="img full" /></div>
</div>
<div class="core-col">
<div class="core-col__inner">
<div class="core-col__eyebrow">
<div class="text eyebrow var">FOCUS</div>
</div>
<h5 class="h-h5 var">Digital acceleration</h5>
<div class="text var small ch-text">
<div class="text var small">We focus on doing the right things to fuel your growth, nothing more, nothing less.</div>
</div>
</div>
<div class="core-col__index">
<div class="core-numb">4</div>
</div>
</div>
</div>
</div>
</div>
<div class="arrows">
<i title="Previous" class="arrow slider-link prev"></i>
<i title="Next" class="arrow slider-link next"></i>
</div>
</div>
help.zip