Javascript 带jQuery的水平滑块：100%高度，图像/子对象的自动宽度

在过去的几天里，我一直在试图找到一个解决我的问题的方法，但真的在任何地方都找不到，谷歌真的很讨厌我，所以我来了。这是一个很大的要求，我的良心在责怪我的要求，但我不知道还能向哪里求助

我正在为一位摄影师建立一个画廊，虽然我可以轻松地使用HTML和CSS，但我的jQuery技能受到了打击（简而言之，它们并不好）-惊喜，惊喜

这项任务变得更加复杂，因为它是一个100%高度的画廊，而100%高度并不好用。我设法设置了一些，但它的功能确实受到了损害

在Stack和Google上挖掘后，我发现了William Moynihan的一个很棒的插件/提琴：

它确切地包含了我的标记和CSS，以及我想要的功能：一个滑动时使主图像居中的滑块，并且是无限的

但是，它不能很好地与

身高：100%因为
宽度：自动属性。以下一行：

$（content）.width（w*$（section.length）

由于CSS中的auto属性，看起来根本不会计算容器的宽度（将其设置为零）。当我通过jQuery.css属性将宽度设置为
（'width'，'auto'）
时，它工作正常，但滑动功能不完善，导致图像在左右移动时跳过/跳跃

我没有使用滑块，因为这是一种很好的方式，可以让内容以水平的方式呈现出来，这在摄影师的网站上看起来很不错。宽度
为100%
将使垂直图像延伸过浏览器窗口，而水平图像将“挂起”在顶部，下面有大量空白。因此，我确信
width:auto
和
身高：100%
是正确的、反应迅速的方法，但如果有人设法“不相信”我，我肯定会跟随你的领导

当我在这里的时候，也许有人可以礼貌地给我指出正确的方向，使这个图库成为有限的——在滑块的开始和结束处结束，左/右按钮相应地消失

非常感谢您的帮助。以下是代码本身，以防提琴不够用：

<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>

要使其有限，只需理解和修改这两个函数

        $('#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
            });
        });

现在，在这段代码中，它使用的是click on.left和.right，如果你想使它有限

只需计算幻灯片的长度，停止添加幻灯片，我已经添加了注释

我刚才指出了

我希望这将有助于……
好的，我将研究一下这个身高问题。有限的功能和动态按钮应该不会太难实现，但现在你能为我提供你想在画廊中使用的图像的尺寸吗？另外，如果你可以把5个示例图像放到网上的某个地方，那么你可以直接在JSFIDLE演示中引用它们。在imgur上创建一个帐户，在那里加载一些图像，然后在你的小提琴中调用它们。我不想给出答案，但如果你被困在这个问题上，这可能会对你有所帮助。我使用carouFredsel满足所有滑块/旋转木马需求。我的jquery非常容易使用，即使您对jquery很生疏，并且有大量的示例可以从中“获得想法”，比如：或者甚至是这个。它有一个方便的代码生成器。不管怎样，这可能会给你省去很多麻烦。请点击：哇。已经两个多月了，我真的没想到会有人回答。这个问题或多或少得到了解决，但不是以我满意的方式解决的，所以这里是这样，以防万一@安布罗西亚，就是这样，我在处理自动宽度，因为上传是动态的（Wordpress），垂直和水平图像都在发挥作用。在这种情况下，尺寸真的很重要吗？@TravisHeeter，这里是我所做的一个例子，但问题仍然存在，因为容器似乎没有正确计算图像宽度，所以它要么跳过大分辨率（即1920x1080）的最后两个或三个图像，要么在较小分辨率的图像上创建一个巨大的黑色间隙（我使用了Sly插件，因为上面的代码似乎对我根本不起作用）。以防万一，Sly插件：已经两个多月了，我想没有人会回答我的问题，但你的解决方案似乎是我一直在寻找的（我找到了一个可行的，但并不完美）。我会尝试一下，然后再回复你。
        $('#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
            });
        });