javascript - Not able to slice the array using `prev` and `next` arrow -

i have array values, need slice , show in web page. have prev , next arrows, according array navigation slicing array values. work when use next arrow. not working prev array.

logically made mistake here. when next or prev goes more array length or less array length applying opacity , disabling button.

any 1 correct me mistake here?

here code :

var num = 0;    var myarray = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13"];    var batch = 5;    var value = 0;        var showarray = function (num) {            var required = myarray.slice(value, (batch+value));      console.log(required, num);            value += 5;          }        showarray(0);        function add(amount) {      num = (num + myarray.length - batch + amount) % myarray.length + batch;      showarray(num);    }     $('#next-arrow').click(function(e){          if(value >= myarray.length) {       $(e.target).css({ opacity:0.5 });       return     }     $(e.target).css({ opacity:1});     add(batch)             });    $('#prev-arrow').click(function(e){          if(value <= myarray.length) {       $(e.target).css({ opacity:0.5 });       return     }          $(e.target).css({ opacity:1});     add(-batch)        });    

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>   <div class="container">                <a href="#" id="prev-arrow">previous</a>        <a href="#" id="next-arrow">next</a>              </div>

please try one

$(document).ready(function(){      var num = 0;   var myarray = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13"];   var batch = 5;   var nextindex = 0;   var previndex = 0;    var showarray = function (boolshowprev) {          var required;          if(boolshowprev){              console.log("==",nextindex, nextindex+batch);             required = myarray.slice(nextindex, nextindex+batch);                 console.log(required)             nextindex += 5;              previndex -= 5;          }else{             if(nextindex >= myarray.length){                  previndex=batch- (nextindex-myarray.length);                 required = myarray.slice(-previndex);                 console.log(required);                  nextindex -= 5;              }else{                  console.log("prev",-batch-previndex,-previndex)                     required = myarray.slice(-batch-previndex,-previndex);                 console.log(required);                 previndex +=batch;                 nextindex -= 5;             }           }     }    showarray(true);   $('#next-arrow').click(function(e){     if(nextindex >= myarray.length) {      $(e.target).css({ opacity:0.5 });      return    }    $(e.target).css({ opacity:1});    showarray(true)    });   $('#prev-arrow').click(function(e){     if(previndex >= myarray.length) {      $(e.target).css({ opacity:0.5 });      return    }     $(e.target).css({ opacity:1});    showarray(false)   });  }) 

please refer plunker