Horizontal slider with jQuery: 100% height, auto width for the images/children

Question

I've been trying to find a solution to my issue for the past few days, but really couldn't find it anywhere, and Google literally hates me, so here I am. This is a big request and my conscience is eating at me for asking, but I don't know where else to turn.

I am building a gallery for a photographer, and while I'm at ease with HTML and CSS, my jQuery skills are taking a beating (in short, they're not good) - surprise, surprise.

The task becomes even more complex since it's a 100% height kind of gallery, and 100% heights don't play nice. I manage to set some of it up, but its functionality is really impaired.

After digging here on Stack and Google I found this great Plugin/Fiddle by William Moynihan: http://jsfiddle.net/wdm954/8GKz6/11/

It contains exactly my markup and CSS , as well as the functionality I was looking for: a slider which centers the main image when sliding, and is infinite.

However, it doesn't play well with height: 100%; because of the width: auto; property on the images. The following line:

$(content).width(w * $(section).length);

Doesn't appear to calculate the width of the container at all (sets it to zero) because of the auto property in the CSS. When I set the width via the jQuery .css property to ('width', 'auto') , it works fine, but the sliding function is imperfect, causing images to skip/jump when moving right and left.

I didn't resort to a slider, because this is a nice way to actually have the content layed out, in a horizontal manner, which is something that looks great on a photographer's website. And of having width: 100%; will make the vertical images stretch past the browser window, and the horizontal ones to "hang" at the top with plenty of white space below. So, I am convinced that width: auto; and height: 100% is the correct, responsive way to go about it, but if someone manages to "unconvince" me, I will definitely follow your lead.

While I'm here, maybe someone could be polite enough to point me in the right direction to make this gallery finite - ending at the start and end of the slider, with the left/right buttons disappearing accordingly.

Any help is greatly appreciated. Here is the code itself, just in case the fiddle isn't enough:

<div class="container">
    <div class="gallery">
        <img src="../img/1.jpg" alt="Image" />
        <img src="../img/2.jpg" alt="Image" />
        <img src="../img/3.jpg" alt="Image" />
        <img src="../img/4.jpg" alt="Image" />
        <img src="../img/5.jpg" alt="Image" />
    </div>
</div>
<nav id="navigation">
    <a href="#" class="left">&#060;&#060;</a>
    <a href="#" class="right">&#062;&#062;</a>
</nav>

<script>
/*  jQuery Ghost Carousel
 *  Copyright (c) 2011 William Moynihan
 *  http://ghosttype.com
 *  Licensed under MIT
 *  http://www.opensource.org/licenses/mit-license.php
 *  May 31, 2011 -- v1.0
 */
$(function() {
    var content = '.container .gallery';
    var section = content + ' > img';

    function ghostCarousel() {

        var v = $(window).width();
        var w = $(section).width();
        var c = (w * $(section).length - v) / 2;

        $(content).width(w * $(section).length);
        $(content).css('margin-left', -c);
        $(content).css('width','auto');

        $('#navigation a.left').click(function(e) {
            e.preventDefault();
            if ($(content).is(':animated')) return false;
            $(content).animate({ marginLeft: '-=' +w }, 1000, function() {
                var first = $(section).eq(0);
                $(section).eq(0).remove();
                $(this).animate({ marginLeft: '+=' +w }, 0);
                $(this).append(first);
            });
        });
        $('#navigation a.right').click(function(e) {
            e.preventDefault();
            if ($(content).is(':animated')) return false;
            $(content).animate({ marginLeft: '+=' +w }, 1000, function() {
                var end = $(section).length - 1;
                var last = $(section).eq(end);
                $(section).eq(end).remove();
                $(this).animate({ marginLeft: '-=' +w }, 0);
                $(this).prepend(last);
            });
        });

    }

    ghostCarousel();

    $(window).resize(function() {
        var v = $(window).width();
        var w = $(section).width();
        var c = (w * $(section).length - v) / 2;
        $(content).css('margin-left', -c);
    });   
});
/* end "jQuery Ghost Carousel" */
</script>

Along with the CSS:

html, body { padding: 0px; }

.container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;   
}
.container .gallery > img {
    position: relative;
    float: left;
    height: 100%;
}

Answer 1

To make it finite, you need to understand and modify this tow functions only,

        $('#gcNav a.left').click(function(e) {
            e.preventDefault();
            if ($(content).is(':animated')) return false;
            $(content).animate({ marginLeft: '-=' +w }, 1000, function() {
                var first = $(section).eq(0);//this is first
                $(section).eq(0).remove();
                $(this).animate({ marginLeft: '+=' +w }, 0);
                $(this).append(first);//adding
            });
        });
        $('#gcNav a.right').click(function(e) {
            e.preventDefault();
            if ($(content).is(':animated')) return false;
            $(content).animate({ marginLeft: '+=' +w }, 1000, function() {
                var end = $(section).length - 1;
                var last = $(section).eq(end);//this is last
                $(section).eq(end).remove();
                $(this).animate({ marginLeft: '-=' +w }, 0);
                $(this).prepend(last);//adding
            });
        });

Now, in this code, it is working with click on .left, and .right, if you want to make it finite,

just calculate the length of slides, and stop adding the slides, I have added the comments..

I have just pointed out the way...

I hope this will help...