JS/jQuery array looping thumbnails using next and previous image arrows for navigation

I'm fairly new to arrays and I was interested in using it to control a series of thumbnail positions whenever a next or previous arrow is pressed. Additionally these thumbs should loop whenever an image completes a cycle across the array. I used a series of if/else statements and splice to add and remove thumbs that needed to be recycled.

I was successful at getting the Next button to accomplish the task I was working to achieve, but I cannot seem to get the Previous button to behave the same way and reverse the thumbnail flow in the opposite direction. I've tried many different things, but have had no success.

// find elements
var $galleryThumbs = $('#galleryThumbs');
var $galleryThumbsWrapper = $('#galleryThumbsWrapper');
var $next = $('#nextBtn');
var $prev = $('#prevBtn');

var $thumb01 = $('.thumb#t01');
var $thumb02 = $('.thumb#t02');
var $thumb03 = $('.thumb#t03');
var $thumb04 = $('.thumb#t04');
var $thumb05 = $('.thumb#t05');
var $thumb06 = $('.thumb#t06');
var $thumb07 = $('.thumb#t07');

// handle click and add class
var pic = new Array();
  pic = [$thumb05, $thumb06, $thumb07, $thumb01, $thumb02, $thumb03, $thumb04];

var x = $($galleryThumbsWrapper);

var thumbOrder = 0;

function checkNextOrder(thumbOrder){
x.css('float','left');
if(thumbOrder == 0) {
    console.log("thumbOrder == 0");
    pic.splice(0, 1, $thumb04);
    x.append($thumb04);
    return thumbOrder;

}else if(thumbOrder == 1) {
    console.log("thumbOrder == 1");
    pic.splice(0, 1, $thumb05);
    x.append($thumb05);
    return thumbOrder;

}else if(thumbOrder == 2) {
    console.log("thumbOrder == 2");
    pic.splice(0, 1, $thumb06);
    x.append($thumb06);
    return thumbOrder;

}else if(thumbOrder == 3) {
    console.log("thumbOrder == 3");
    pic.splice(0, 1, $thumb07);
    x.append($thumb07);
    return thumbOrder;

}else if(thumbOrder == 4) {
    console.log("thumbOrder == 4");
    pic.splice(0, 1, $thumb01);
    x.append($thumb01);
    return thumbOrder;

}else if(thumbOrder == 5) {
    console.log("thumbOrder == 5");
    pic.splice(0, 1, $thumb02);
    x.append($thumb02);
    return thumbOrder;

}else if(thumbOrder == 6) {
    console.log("thumbOrder == 6");
    pic.splice(0, 1, $thumb03);
    x.append($thumb03);
    return thumbOrder;
}
}



function checkPrevOrder(thumbOrder){
x.css('float','right');
console.log('previous');
if(thumbOrder == 6) {
    console.log("thumbOrder == 6");
    pic.splice(6, 1, $thumb04);
    x.append($thumb04);
    return thumbOrder;
}else if(thumbOrder == 5) {
    console.log("thumbOrder == 5");
    pic.splice(6, 1, $thumb03);
    x.append($thumb03);
    return thumbOrder;
}else if(thumbOrder == 4) {
    pic.splice(6, 1, $thumb02);
    x.append($thumb02);
    return thumbOrder;
}else if(thumbOrder == 3) {
    console.log("thumbOrder == 3");
    pic.splice(6, 1, $thumb01);
    x.append($thumb01);
    return thumbOrder;
}else if(thumbOrder == 2) {
    console.log("thumbOrder == 2");
    pic.splice(6, 1, $thumb07);
    x.append($thumb07);
    return thumbOrder;
}else if(thumbOrder == 1) {
    console.log("thumbOrder == 1");
    pic.splice(6, 1, $thumb06);
    x.append($thumb06);
    return thumbOrder;
}else if(thumbOrder == 0) {
    console.log("thumbOrder == 0");
    pic.splice(6, 1, $thumb05);
    x.append($thumb05);
    return thumbOrder;
}
}

$($next).on('click', function() {
console.log('next');
console.log("Thumborder is currently at:" + thumbOrder);
if(thumbOrder < 6){
    thumbOrder++;
    checkNextOrder(thumbOrder);
}else{
    thumbOrder = 0;
    checkNextOrder(thumbOrder);
}
})



$($prev).on('click', function() {
console.log('prev');
if(thumbOrder > 0){
    thumbOrder--;
    checkPrevOrder(thumbOrder);
}else{
    thumbOrder = 6;
    checkPrevOrder(thumbOrder);
}
})

I have laid out my issue in a JS Fiddle for review. If anyone has a more simple/elegant way of solving this, your feedback would be greatly appreciated.