Question

Ive been trying to make one and searched google for hours, but i cannot find what im after.

Basically it is an image slider that slides in from the far right of your screen(regardless of resolution) goes to the middle of the viewport then slides out the far left.

Im not a jquery wizard so i cannot complete this myself, but i have a basic understanding how it could be done.

example: https://www.tumblr.com/

Any1 know if there is something out there that works this way?

Thanks

EDIT
Im half way there, it doesnt center though

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#scroller .item").css("width", $(document).width());
        $("#scroller").scrollable({
            circular: true,
            speed: 1200
        }).autoscroll({ interval: 4000, autopause: false }).navigator();
        api = $('#scroller').data("scrollable");
        $(window).resize(function () {
            if ($('#scroller .items:animated').length == 0) {
                $("#scroller .item").css("width", $(document).width());
                nleft = $(document).width() * (api.getIndex() + 1);
                $("#scroller .items").css("left", "-" + nleft + "px");
            }
        });
        api.onSeek(function (event) {
            $("#scroller .item").css("width", $(document).width());
            nleft = $(document).width() * (api.getIndex() + 1);
            $("#scroller .items").css("left", "-" + nleft + "px");
        });
    });
</script>

HTML/ CSS

            <div id="Slider">
            <div id="area">
                <div id="scroller">
                    <div class="items">
                        <div class="item">
                            <a href="Default.aspx" class="image"><img src="Images/Slider/1_1000x350.png" alt="" width="1140" height="350" title="" /></a>
                        </div>
                        <div class="item">
                            <a href="Default.aspx" class="image"><img src="Images/Slider/2_1000x350.png" alt="" width="1140" height="350" title="" /></a>
                        </div>
                        <div class="item">
                            <a href="Default.aspx" class="image"><img src="Images/Slider/3_1000x350.png" alt="" width="1140" height="350" title="" /></a>
                        </div>
                    </div>
                </div>
            </div>
    </div>




 #Slider
{
    left:0;
    width:100%;
    height:420px;
    background-color:white;
    position:absolute;
    z-index:1;
}

#scroller 
{
    z-index:1;
    position:relative;
    overflow:hidden;
    height: 420px;
    width: 100%;
    margin: 0 0 0 0;
}

#scroller .items 
{
    z-index:1;
    position:absolute;
    width:20000em;
}

#scroller .items .item {
    width: 1140px;
    height: 420px;
    float:left;
}

Answer 1

Finally I’ve managed to find what you want exactly and using it right now;
http://css-plus.com/examples/plugins/PlusSlider/

You can see full working example when you Download the slider from Github.