I am currently working on developing a Character Selection feature for Airconsole. I had the idea of implementing this using a Jquery method similar to a Gallery. In order to achieve this, I require a previous button, a next button, and the character display section. However, I seem to be encountering an issue that I can't quite resolve, probably because I am not very familiar with Javascript.
var speed = 100;
$(".prev").click(function() {
var now = $(this).parent().next("ul.char_display").children(":visible"),
last = $(this).parent().next("ul.char_display").children(":last"),
prev = now.prev();
prev = prev.index() == -1 ? last : prev;
now.fadeOut(speed, function() {
prev.fadeIn(speed);
});
});
$(".next").click(function() {
var now = $(this).parent().next("ul.char_display").children(':visible'),
first = $(this).parent().next("ul.char_display").children(':first'),
next = now.next();
next = next.index() == -1 ? first : next;
now.fadeOut(speed, function() {
next.fadeIn(speed);
});
});
$(".char_display li").click(function() {
var first = $(this).parent().children(':first'),
next = $(this).next();
next = next.index() == -1 ? first : next;
$(this).fadeOut(speed, function() {
next.fadeIn(speed);
});
});.prev {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.next {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.char_display li {
display: none;
list-style: none;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.char_display li:first-child {
display: block;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.char_display {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.char {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#char1 {
background: blue;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#char2 {
background: red;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="characterScreen_characterBlock">
<div id="characterScreen_leftArrow" class="characterScreen_left" ontouchend="otherChar(true);" ontouchend="otherChar(true);">
<div class="prev"></div>
</div>
<div id="characterScreen_characterDisplay" class="characterScreen_center">
<ul class="char_display">
<li>
<div class="char" id="char1"></div>
</li>
<li>
<div class="char" id="char2"></div>
</li>
</ul>
</div>
<div id="characterScreen_rightArrow" class="characterScreen_right" ontouchend="otherChar(false);" ontouchend="otherChar(false);">
<div class="next"></div>
</div>
</div>