How can I paginate the thumbnails of this jQuery image slider?

Link to code below. n.b. this is quite messy as I have dropped it in from the site.

http://ift.tt/1h8jtM5

I have an image slider, with the 'active' image on the left and thumbnails for all images on the right.

The thumbnails are automatically generated based on the images in the #slider div.

You click one of the thumbnails and the active image changes.

What I need to do at request of my client, is paginate these thumbnails to a maximum of 14 items.

After item 14, will be a 'next' link, which changes to show the remaining thumbnails.

There will not be more than 28 thumbnails, if this helps. It is fine to have a 'next' link on both the 1st and 2nd page of thumbnails - no requirement for a 'previous' link.

Thank you! This is for a important project so any help much appreciated.

Important code below but please see js fiddle above for full example.

<div class="lookbook__image">
<div id="slider1">
<img src="xxxx.jpg">
... and more images
</div>
</div>

<div class="lookbook__thumbs">
<ul class="lookbook__thumbs__list">
</ul>
</div>
</div>
<script src="http://ift.tt/1UGj41L"></script>

<script>
$(document).ready(function(){
$('#slider1').cycle({
fx: 'fade', // Here you can change the effect
speed: 'slow', 
timeout: 0,
next: '#next', 
prev: '#prev',
pager: '.lookbook__thumbs__list',
pagerAnchorBuilder: function(idx, slide) { 
return '<li><a href="#"><img src="' + slide.src + '" /></a></li>'; 
} 
});
});
</script>

via Chebli Mohamed