Adding Navigational Arrows and Pagination GSAP Slideshow

Question

I have built a slideshow with the following gsap / jquery script. Looking for a way to extend the script to add Navigational Arrows and Pagination.

Any help is appreciated.

<script>
$(function(){

                var $slides = $(".slide");
                var $slides_text = $(".slide2");
                var currentSlide = 0;
                var stayTime = 5;
                var slideTime = 1.3;

                TweenLite.set($slides.filter(":gt(0)"), {opacity:0,display:'none'});
                TweenLite.set($slides_text.filter(":gt(0)"), {opacity:0,display:'none'});
                TweenLite.delayedCall(stayTime, nextSlide);

                function nextSlide(){                   
                        TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:0,display:'none'} );
                        TweenLite.to( $slides_text.eq(currentSlide), slideTime, {opacity:0,display:'none'} );
                        currentSlide = ++currentSlide % $slides.length;     
                        TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:1,display:'block'} );
                        TweenLite.to( $slides_text.eq(currentSlide), slideTime, {opacity:1,display:'block'} );
                        TweenLite.delayedCall(stayTime, nextSlide);
                }

            });
</script>

Answer 1

I answered my own question. Figured out how to do next and prev buttons + The pagination. If anyone needs a working slideshow for Gsap here is the script for it.

          $(function(){

                var $slides = $(".slide");
                var currentSlide = 0;
                var stayTime = 10;
                var slideTime = 1.3;
                var numberOfSlides = $slides.length -1;

                TweenLite.set($slides.filter(":gt(0)"), {opacity:0,display:'none'});
                TweenLite.delayedCall(stayTime, nextSlide);

                function nextSlide(){                   
                        TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:0,display:'none'} );
                        currentSlide = ++currentSlide % $slides.length;     
                        TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:1,display:'block'} );
                        TweenLite.delayedCall(stayTime, nextSlide);
                }

                $('.go-next').click(function() {
                        TweenLite.killDelayedCallsTo(nextSlide);
                        TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:0,display:'none'} );
                        currentSlide = ++currentSlide % $slides.length;     
                        TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:1,display:'block'} );
                });

                $('.go-prev').click(function() {
                        TweenLite.killDelayedCallsTo(nextSlide);
                        TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:0,display:'none'} );
                        currentSlide = --currentSlide % $slides.length;     
                        TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:1,display:'block'} );
                });
                $('.banner').mouseenter(function() {
                        TweenLite.killDelayedCallsTo(nextSlide);
                });
                $('.banner').mouseleave(function() {
                        TweenLite.delayedCall(stayTime, nextSlide);
                });

                    for(i = -1; i < numberOfSlides; i++) {
                        (function() {
                            var slideIndex = i;
                            var slideLabel = i + 1;
                            var x = $('<a id="slide' + slideLabel + '"href="#" class="paginatorLink">' + '<i class="material-icons">brightness_1</i>' + '</a>');
                            x.click(function() {



                        TweenLite.killDelayedCallsTo(nextSlide);
                        TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:0,display:'none'} );
                        currentSlide = slideLabel;      
                        TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:1,display:'block'} );


                            });
                            $('.pagination').append(x);
                        })();
                    }               

            });