javascript - Adding Navigational Arrows and Pagination GSAP Slideshow -

i have built slideshow following gsap / jquery script. looking way extend script add navigational arrows , pagination.

any 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> 

i answered own question. figured out how next , prev buttons + pagination. if needs working slideshow gsap here script 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; < numberofslides; i++) {                         (function() {                             var slideindex = i;                             var slidelabel = + 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);                         })();                     }                             });