How turn a list of items in to a "multi-page" list with jquery

Question

I have a website that dynamically creates a list of posts, and I don't have access to the function that creates the content, so I have to work with what is outputted.

<div id="wrap">
    <div>Item 1</div>
    <div>Item 2</div>
    ...
    <div>Item 20</div>
    <div>Item 21</div>
</div>

The function creates 21 items in a list-format (one on top of the other). What I'm looking to achieve is maybe only have 7 visible at a time, and have arrow navigation to shuffle through the various sets of items.

$("#wrap > div").slice(0,7).css("background","yellow");
$("#wrap > div").slice(7,14).css("background","red");
$("#wrap > div").slice(14,21).css("background","blue");

Using .slice I've been able to target the sets of 7, but as far as how to hide and scroll through the sets, I'm a bit lost.

Any help would be greatly appreciated

https://jsfiddle.net/ga8vtojg/

Answer 1

Just for fun, one more that doesn't depend on having the number of items in advance (like if they are dynamically generated...) and has a variable to change the page size.

var $el = $("#wrap > div");
var pageSize = 7;

$el.slice(0, pageSize).css({background: 'yellow', display: 'block'});
$el.slice(pageSize, $el.length).css({background: 'yellow', display: 'none'});

function addSlice(num){
  return num + pageSize;
}

function subtractSlice(num){
  return num - pageSize;
}

var slice = [0, pageSize];

$('.next').click(function(){
   if (slice[1] < $el.length ){ 
     slice = slice.map(addSlice);   
   }
   showSlice(slice);
});

$('.prev').click(function(){
  if (slice[0] > 0 ){ 
    slice = slice.map(subtractSlice); 
  }
  showSlice(slice);
});

function showSlice(slice){
  $el.css('display', 'none');
  $el.slice(slice[0], slice[1]).css('display','block');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
    <div>Item 5</div>
    <div>Item 6</div>
    <div>Item 7</div>
    <div>Item 8</div>
    <div>Item 9</div>
    <div>Item 10</div>
    <div>Item 11</div>
    <div>Item 12</div>
    <div>Item 13</div>
    <div>Item 14</div>
    <div>Item 15</div>
    <div>Item 16</div>
    <div>Item 17</div>
    <div>Item 18</div>
    <div>Item 19</div>
    <div>Item 20</div>
    <div>Item 21</div>
</div>
<div class="next">Next</div>
<div class="prev">Prev</div>

Answer 2

DEMO

var page = 1;
$("#wrap > div").slice(0, 7).addClass('page1').css("background", "yellow");
$("#wrap > div").slice(7, 14).addClass('page2').css("background", "red").hide();
$("#wrap > div").slice(14, 21).addClass('page3').css("background", "blue").hide();
var maxPage = 3;
$('.next').on('click', function() {
  if (page < maxPage) {
    $("#wrap > div:visible").hide();
    $('.page' + ++page).show();
  }
})
$('.prev').on('click', function() {
  if (page > 1) {
    $("#wrap > div:visible").hide();
    $('.page' + --page).show();
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="wrap">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
    <div>Item 5</div>
    <div>Item 6</div>
    <div>Item 7</div>
    <div>Item 8</div>
    <div>Item 9</div>
    <div>Item 10</div>
    <div>Item 11</div>
    <div>Item 12</div>
    <div>Item 13</div>
    <div>Item 14</div>
    <div>Item 15</div>
    <div>Item 16</div>
    <div>Item 17</div>
    <div>Item 18</div>
    <div>Item 19</div>
    <div>Item 20</div>
    <div>Item 21</div>
</div>
<div class="next">Next</div>
<div class="prev">Prev</div>

Answer 3

Wrap your div id=#wrap in another div and set the height to however much of the list you want in view and the overflow to hidden. Then you can use an animation or addClass function to change the position:relative on your #wrap to move up and down.

edit: OK I've made a jsfiddle doing what I described above.

jsfiddle

This does the animated sliding effect you were looking for.

$(".next").click(function(){
  if($("#wrap").offset().top >= -126){
    $("#wrap").animate({top: '-=126px'});
   }
}); 

$('.prev').click(function() {
 if($("#wrap").offset().top <= 0){
  $("#wrap").animate({top: '+=126px'});
  }
});

Answer 4

Here's the fiddle for this answer: https://jsfiddle.net/sgafbsft/.

With this solution you also have endless paging, so after you click "next" on the last page, the first page is displayed, and if you click prev on the first page, the last page is displayed.

JavaScript

var itemBlockArray = new Array();
var currentIndex = 0;

itemBlockArray.push($("#wrap > div").slice(0,7).css("background","yellow"));
itemBlockArray.push($("#wrap > div").slice(7,14).css("background","red").hide());
itemBlockArray.push($("#wrap > div").slice(14,21).css("background","blue").hide());

$('.next').click(function() {
    itemBlockArray[currentIndex].hide();
    itemBlockArray[getPageIndex(1)].show();
});

$('.prev').click(function() {
    itemBlockArray[currentIndex].hide();
    itemBlockArray[getPageIndex(-1)].show();
});

function getPageIndex(indexAddition)
{
    var newIndex = currentIndex + indexAddition;

    if (newIndex < 0) {
        var lastPage = itemBlockArray.length - 1;
        currentIndex = lastPage
        return currentIndex;
    } else if (newIndex > (itemBlockArray.length - 1)) {
        currentIndex = 0;
        return currentIndex;
    }

    currentIndex = newIndex;

    return currentIndex;
}