hip85

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