I have a unique approach to displaying a series of divs where only 5 are shown at a time using the slice() method. To navigate through the items, I include an ellipsis (...) link after every 4th item, which allows users to easily move on to the next set of 5 items. If you're having trouble picturing it, here's how it would look with all the items displayed instead of just the 5:
< 1 2 3 4 … 5 6 7 8 … 9 10 11 12 … 13 14 15 16 >
The challenge arises when a user wants to go back and view the previous 5 divs. Clicking the back arrow should hide the current set and reveal the preceding 5 divs. While slice() doesn't allow for reverse functionality, selecting the previous 5 siblings presents another hurdle. Using prev() or nth-child won't quite solve this issue as desired. As someone who considers themselves beyond a beginner in jQuery but not quite a Jedi yet, I'm stuck on finding a solution without overcomplicating the function. Check out my work-in-progress fiddle here:
https://jsfiddle.net/nehLuj98/
$(".btn-nav").slice(0,5).show();
$(".btn-ellipsis").each(function(){
var goNum = $(this).prev(".btn-num");
var num = Number(goNum.attr("id"));
var currentNum = $(this).find(".current");
$(this).click(function(){
$(this).hide();
$(".btn-num").hide().slice(num,(num+4)).show().next(".btn-ellipsis").show();
$(this).next(".current").removeClass("current");
$(".btn-num").hide().slice(num,(num+4)).show().next(".btn-ellipsis").show();
goNum.add("#"+(num+1)+"").addClass("current");
});
$(".btn-prev").click(function(){
//Here's where I'd like to add the functionality to show the previous 5 items
//$(".btn-nav").add(".btn-ellipsis").hide();
});
});
Since I'm working with AngularJS, the dynamic generation of numbers from a .json file might play a role in this feature. The insertion of the ellipsis link every 4th numbered item accommodates variations in the number of links available. For simplification purposes, I've included it directly in the html for the fiddle.
TL;DR
Do you know of a way to achieve reverse functionality using jQuery's slice() method or select the previous 5 siblings differently?