iPad Book layout

I wondering if someone knows how to display a table image view in a book layout. ie. I have a number of png images displayed in an array and I am able to flick between each one, however at the bottom of the screen I can only see 3 dots (I have 10 images in the array), and instead of the dots I would like to use a downsized version of the images I am using to be thumbnails so they can be clicked to go straight to that image.

Here is code I am using:

var viewCollection = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    viewCollection[0] = "../images/1.png";
    viewCollection[1] = "../images/2.png";
    viewCollection[2] = "../images/3.png";
    viewCollection[3] = "../images/4.png";
    viewCollection[4] = "../images/5.png";
    viewCollection[5] = "../images/6.png";
    viewCollection[6] = "../images/7.png";
    viewCollection[7] = "../images/8.png";
    viewCollection[8] = "../images/9.png";
    viewCollection[9] = "../images/10.png";
 
 
Ti.API.info('array '+ viewCollection);
var loadedViews = [];
 
 
// SCROLLER
var scroller = Titanium.UI.createScrollableView({
    showPagingControl:true,
    clipViews:false,
    top:100,
    left:20,
    right:20,
    height:670,
    width: 947,
    pagingControlHeight:30,
    pagingControlColor:'transparent',
    maxZoomScale:2.0,
    currentPage:0
 
});
scroller.addEventListener('scroll', function(e){
 
    if (e.currentView != lastView.index) {
 
        loadViews(e.view.index);
 
    }
 
    Titanium.API.info(loadViews);
 
});
 
win.add(scroller);
 
 
 
 
// LOAD VIEWS
function loadViews(index)
{
    loadedViews = [];
    var selectedPage = 0;
 
    var i = 0;
 
    if(index > 0)
    {
        i = index - 1;
        var v1 = Titanium.UI.createView({index:i});
        addImageToView(v1, viewCollection[i]);
 
        loadedViews.push(v1);
 
        selectedPage = 1;
    }
 
        i = index;
        var v2 = Titanium.UI.createView({index:i});
        addImageToView(v2, viewCollection[i]);
 
        loadedViews.push(v2);
 
    if(index < viewCollection.length - 1)
    {
        i = index + 1;
        var v3 = Titanium.UI.createView({index:i,opacity:0});
 
 
        addImageToView(v3, viewCollection[i]);
 
       loadedViews.push(v3);
    }
    else
    {
        selectedPage = 1;
 
    }
 
    scroller.views = loadedViews;
    scroller.currentPage = selectedPage;
    lastView = loadedViews[scroller.currentPage];
}
 
function addImageToView(view, imageUrl)
{
   var imageView = Titanium.UI.createImageView({image:imageUrl});
 
 
 
 // view.animate(animation);
 
  view.add(imageView);
 view.animate({opacity: 1, duration: 0});
 
 
}
 
// Load the initial view you want by passing the index of the view from your viewCollection
loadViews(0);

Any help is greatly appreciated - thanks!