I have been cobbling something together from different examples that I have seen online I would like to know why is it not just showing 1 button per page and instead showing them all and decreasing the numbers of visible buttons for each right click by one. And yet when you click the left arrow it shows a blank screen.
Also if you click the right arrow after clicking the left arrow you will be stuck on a page with only one button, and the left still just shows a blank screen.
I am trying to have only one button on screen at a time and be able to switch between the different buttons via the right and left arrows. this is for an idlemine game.
.hide {
display: none;
}
.step-box {
width: 640px;
height: 150px;
border: 1px solid;
position: relative;
}
.names-content {
padding: 10px
}
ul {
list-style: none;
}
li {
float: center;
margin: 5px;
background: #ABA38F;
color: #fff;
padding: 5px;
}
li span {
width: 150px;
text-align: center;
}
.arrows {
position: absolute;
top: 70px;
cursor: pointer;
}
.arrow-left {
left: 10px;
}
.arrow-right {
right: 10px;
}
.arrows span {
width: 30px;
height: 30px;
border-radius: 30px;
background: #BABABA;
color: #fff;
clear: both;
display: block;
text-align: center;
font-size: 20px;
line-height: 30px;
}<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="test2.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
</head>
<body>
<div class="step-box">
<div class="arrows arrow-left"> <span><i> < </i></span>
</div>
<div class="names-content">
<ul id="entered-names-ul">
<li>
<button>test</button>
</li>
<li>
<button>test</button>
</li>
<li>
<button>test</button>
</li>
<li>
<button>test</button>
</li>
<li>
<button>test</button>
</li>
<li>
<button>test</button>
</li>
<li>
<button>test</button>
</li>
<li>
<button>test</button>
</li>
<li>
<button>test</button>
</li>
<li>
<button>test</button>
</li>
<li>
<button>test</button>
</li>
<li>
<button>test</button>
</li>
<li>
<button>test</button>
</li>
</ul>
</div>
<div class="arrows arrow-right"> <span><i>></i></span>
</div>
</div>
<script>
var arrowRightCount = 0;
var arrowLeftCount = 0;
$(document).ready(function() {
//RIGHT ARROW
$(".step-box .arrow-right").click(function(e) {
console.log("right arrow clicked");
var lnt = $("#entered-names-ul > li").length;
if (lnt > 3) {
arrowRightCount = arrowRightCount + 3;
arrowLeftCount = arrowLeftCount - 3;
if (arrowRightCount > lnt) {
arrowRightCount = lnt;
}
for (var i = 0; i < arrowRightCount; i++) {
$("#entered-names-ul > li:eq(" + i + ")").addClass('hide');
}
var jlimit = arrowRightCount + 3;
if (jlimit > lnt) {
jlimit = lnt;
}
for (var j = arrowRightCount; j < jlimit; j++) {
$("#entered-names-ul > li:eq(" + i + ")").removeClass('hide');
}
}
});
//LEFT ARROW
$(".step-box .arrow-left").click(function(e) {
var lnt = $("#entered-names-ul > li").length;
if (lnt > 3) {
arrowLeftCount = arrowLeftCount - 3;
arrowRightCount = arrowRightCount - 3;
if (arrowLeftCount < lnt) {
arrowLeftCount = lnt;
}
for (var i = 0; i < arrowLeftCount; i++) {
$("#entered-names-ul > li:eq(" + i + ")").addClass('hide');
}
var jlimit = arrowLeftCount - 3;
if (jlimit < lnt) {
jlimit = lnt;
}
for (var j = arrowLeftCount; j < jlimit; j++) {
$("#entered-names-ul > li:eq(" + i + ")").removeClass('hide');
}
}
});
});
</script>
</body>
</html>