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.