根据当前滑动高度动态更改div的高度

Question

我在下一页上有一个文本滑块：

已删除

链接

我想要做的是如果加载了包含大量文本的幻灯片，则包含DIV会改变它的高度，这样它就不会被切断。

                var slides = $('.slide');
                var container = $('#slides ul');
                var elm = container.find(':first-child').prop("tagName");
                var item_width = container.width();
                var previous = 'prev'; //id of previous button
                var next = 'next'; //id of next button
                slides.width(item_width); //set the slides to the correct pixel width
                container.parent().width(item_width);
                container.width(slides.length * item_width); //set the slides container to the correct total width
                container.find(elm + ':first').before(container.find(elm + ':last'));
                resetSlides();


                //if user clicked on prev button

                $('#buttons a').click(function (e) {
                    //slide the item

                    if (container.is(':animated')) {
                        return false;
                    }
                    if (e.target.id == previous) {
                        container.stop().animate({
                            'left': 0
                        }, 1500, function () {
                            container.find(elm + ':first').before(container.find(elm + ':last'));
                            resetSlides();
                        });
                    }

                    if (e.target.id == next) {
                        container.stop().animate({
                            'left': item_width * -2
                        }, 1500, function () {
                            container.find(elm + ':last').after(container.find(elm + ':first'));
                            resetSlides();
                        });
                    }

                    //cancel the link behavior            
                    return false;

Answer 1

从#slides li

中删除以下行

height: 250px;

您现在应该使用javascript来更改＆＃34;幻灯片的高度＆＃34;元件。这是一个可以在你的页面上运行的 hack 示例，但显然你可以选择一些适合你的页面。更换幻灯片后运行它。 （也许把它连接到按钮上）

//The second list item seems to be the visible one. This will likely fail with less than 2 items.
var newHeight = document.getElementById("slides").children[0].children[1].clientHeight;
document.getElementById("slides").style.height = newHeight+"px";

获取可见项目的高度并相应地更改包含元素的高度。