Slideshow by array using slice method I made a slide show using array values, it works, but I strongly believe that the way I did is too long. 

There should be an easier or more compact way to achieve this.

$(document).ready(function () {

  var num = 0;
  var myArray = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13"];
  var batch = 1;
  var value = 0;
  var tdLength = 5;
  var flag = true;
  var cal = 0;

  var showArray = function (num) {

    var required = myArray.slice(num, (num+5));
    $('.info').empty();

    $.each(required, function (item, n) {

      $('.info').append(
         '&lt;h1&gt;'+ n +'&lt;/h1&gt;'
        )

    })

    //value += 5; 

  }


  function add(amount) {
    num = (num + tdLength - 1 + amount) % tdLength + 1

    cal = (num-1) * 5;
    //console.log(myArray.slice(cal, cal+5));
    showArray(cal);

  }

 $('#next-arrow').click(function(e){

   flag = true;

   if(cal &gt;= (tdLength+5)) {
     $(e.target).css({ opacity:0.5 });
     return
   }
   $(e.target).css({ opacity:1});
   add(batch)


 }); 
 $('#prev-arrow').click(function(e){

   flag = false;

   if(cal &lt;= 1) {
     $(e.target).css({ opacity:0.5 });
     return
   }

   $(e.target).css({ opacity:1});
   add(-batch)

 });

 $('#next-arrow').click();

})


HTML :

&lt;div class="info"&gt;

    &lt;/div&gt;

    &lt;div class="container"&gt;

      &lt;a href="#" id="prev-arrow"&gt;Previous&lt;/a&gt;
      &lt;a href="#" id="next-arrow"&gt;Next&lt;/a&gt;

    &lt;/div&gt;


Live Demo
JavaScript does type conversion automatically, there is no need to create the myArray variable. You can do that entire bit using a for loop similar to this:

var showArray = function (num) {
  $('.info').empty();
  for (var i = num; i &lt; Math.max(num + 5, 13); ++i) {
    $('.info').append(`&lt;h1&gt;${n}&lt;/h1&gt;`);
  }
};


(Maybe instead of hardcoding 13, you have a const for the length)
Keep your use of semicolons consistent. Either have them or don't. Pick a style convention and stick to it.