我可以创建内容高度可变的尾部滑块导航吗？

Question

如今，大多数人都非常了解 Coda Slider 效果，但即使通过谷歌搜索并在这里进行搜索，我也找不到答案。

问题 如何创建一个使用水平滑动/滚动的 Coda Slider 样式导航，但在滑动动画期间将其高度调整为内容所需的高度？

例如，第一张“幻灯片”中只有一张图片（宽度为 400 像素，高度为 300 像素），但下一张幻灯片包含大量信息，包括图片、文本和视频内容，总计宽度为 400 像素，高度为 800 像素。 现在，首先创建一个 800 像素高的容器只是浪费幻灯片 1 的空间，因此我需要根据单个幻灯片内容所需的高度动态更改幻灯片容器的高度。

这可能吗？ 也许那里有一个教程，你们中的一个可以向我指出这一点。

在技​​术方面，我对xHTML和CSS非常适应，但对jQuery和PHP只是业余爱好者。 虽然这不应该限制您的答案，但请在解释时牢记这一点。

非常感谢您的阅读， 我期待您的想法、解决方案和一般意见。

詹尼斯

Answer 1

我最近推出了自己的。 这是（希望）一个有用的起点。

这是我的“下一步按钮”的代码。

var canSlide = true;
$('.next').bind('click', function() {



            if (!canSlide) { return false } // prevent queuing up of multiple clicks

            $('.prev').fadeIn(500);

            canSlide = false;

            $('.testimonials-container').animate({ left: '-=1011px' }, 1000, function() { canSlide = true });            

            if (currentPane == totalPanes) {

                $('.next').fadeOut(500);
                canScroll = false;

            } else {
                currentPane++;


            }

要让它调整高度，您只需向动画的 JSON 参数添加高度即可。 当然

.animate({left: '-=1011px', height: newHeight + 'px'})

，您需要一些 JavaScript 来计算出下一个高度应该是多少！