Slideshow by array using slice method

Question

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(
         '<h1>'+ n +'</h1>'
        )

    })

    //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 >= (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 <= 1) {
     $(e.target).css({ opacity:0.5 });
     return
   }

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

 });

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

})

HTML :

<div class="info">

    </div>

    <div class="container">

      <a href="#" id="prev-arrow">Previous</a>
      <a href="#" id="next-arrow">Next</a>

    </div>

Live Demo

Answer 1

1. 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 < Math.max(num + 5, 13); ++i) {
       $('.info').append(`<h1>${n}</h1>`);
     }
   };
   

   (Maybe instead of hardcoding 13, you have a const for the length)

2. Keep your use of semicolons consistent. Either have them or don't. Pick a style convention and stick to it.