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>
