i have a total of 11 div in my app. what i want to do is to display 3 divs in between 2 permanent div it should look like this

|first permanent div| |div 1| |div 2| |div 3| |second permanent div|

|previous| |next|

when i click on next is should look like this

|first permanent div| |div 2| |div 3| |div 4| |second permanent div|

|previous| |next|

and so on. and when im not div 1,2,3 the previous should be disabled and when im no 7,8,9 the next should be disabled.

but i cant make it i'm using this fiddle as a sample http://jsfiddle.net/WGkPV/1/ its working but only one div is shown in the center of my two permanent div which is not in my plan.im getting like this

|first permanent div| |div 1| |second permanent div|

|previous| |next|

any suggestion will be taken seriously.

here is the code of the fiddle im working on as tutorial

$(document).ready(function () {
    var divs = $('.mydivs>div');
    var now = 0; // currently shown div
    divs.hide().first().show();
    $("button[name=next]").click(function (e) {
        divs.eq(now).hide();
        now = (now + 1 < divs.length) ? now + 1 : 0;
        divs.eq(now).show(); // show next
    });
    $("button[name=prev]").click(function (e) {
        divs.eq(now).hide();
        now = (now > 0) ? now - 1 : divs.length - 1;
        divs.eq(now).show(); // or .css('display','block');
        //console.log(divs.length, now);
    });
});

<div class="mydivs">
    <div>div 1</div>
    <div>div 2</div>
    <div>div 3</div>
    <div>div 4</div>
</div>