Edit in JSFiddle

/*----------------------------------Custom KO Binding Handler-----------------------------------------------*/

ko.bindingHandlers.SliderContainer = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {


        
        var value = ko.unwrap(valueAccessor());
        var parent = $(element);
        var childrens = parent.children();


        parent.height(value.height);
        parent.width(value.width);
        parent.css('overflow', 'hidden');

        var animationElement = $('<div style="position:relative;top:0;left:0;"></div>');
        animationElement.width(value.width * childrens.length);
        animationElement.height(value.height);
        animationElement.css('position','relative');
        animationElement.css('left',0);



        parent.prepend(animationElement);
        
        for (var i = 0; i < childrens.length; i++) {
            var children = $(childrens[i]);

            children.width(value.width);
            children.height(value.height);
            
            children.css('float', 'left');
            children.css('display', 'inline-block');
            

            animationElement.append(children);

        }

        if (!value)
            $(element).css('border-color', 'red');
        else
            $(element).css('border-color', '');

        value.indexField.subscribe(function(newValue){
            childrens.each(function(index,children)
            {
                if(index==value.indexField())
                    $(children).find('input,select').removeAttr('disabled');
                else
                    $(children).find('input,select').attr('disabled',true);


            });

            animationElement.animate({
                left:newValue*(value.width*-1)
            },250);
        });


        animationElement.css('left',value.indexField()*(value.width*-1))
        childrens.each(function(index,children)
        {
            if(index==value.indexField())
                $(children).find('input,select').removeAttr('disabled');
            else
                $(children).find('input,select').attr('disabled',true);


        });




    }
};



/*----------------------------------End of Custom KO Binding Handler-----------------------------------------------*/

function ViewModel()
{
    this.Index=ko.observable(0);
    this.GoNext=function(){
        var index=this.Index();
        index++;
        
        if(index>2)
            index=0;
        
        this.Index(index);
        
    }
    
    this.GoBack=function(){
        var index=this.Index();
        index--;
        
        if(index<0)
            index=2;
        
        this.Index(index);

    }
}

ko.applyBindings(new ViewModel());

<div data-bind="SliderContainer:{width:700, height:480,indexField:Index}">
    <div id="screen1"><p>screen1</p></div>
    <div id="screen2"><p>screen2</p></div>
    <div id="screen3"><p>screen3</p></div>
</div>
    
<button data-bind="click:GoBack">Go Back</button>
<input type="text" id="index" data-bind="value:Index,valueUpdate:'afterkeydown'"></input>
<button data-bind="click:GoNext">Go Next</button>

p{
    color:white;
}

#screen1{
    background-color:red;
}
#screen2{
    background-color:green;
}
#screen3{
    background-color:black;
}

#index{
    width:30px;
    text-align:center;
}