how Add next and previous button for slider

[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

[GSAP Helper]

We love helping with GSAP-related questions (like about the API), but unfortunately we just don't have the resources to provide free "here's my project, please do the following for me (add buttons)..." development services. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

You'll significantly increase your chances of getting an answer if you provide a minimal demo, like in CodePen or Stackblitz (not a zip download). Please don't just paste hundreds of lines of code into the thread here. The more minimal your demo, the better. 

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look.