具有动态高度的内容滑块

Question

我正在使用网站下方的滑块

http://callmenick.com/post/responsive-content-slider

此滑块有响应但我想知道如何根据内容自动调整滑块主div高度。

这是滑块代码

JS：

(function($) {

    $.fn.cslide = function() {

        this.each(function() {

            var slidesContainerId = "#"+($(this).attr("id"));

            var len = $(slidesContainerId+" .cslide-slide").size();     // get number of slides
            var slidesContainerWidth = len*100+"%";                     // get width of the slide container
            var slideWidth = (100/len)+"%";                             // get width of the slides

            // set slide container width
            $(slidesContainerId+" .cslide-slides-container").css({
                width : slidesContainerWidth,
                visibility : "visible"
            });

            // set slide width
            $(".cslide-slide").css({
                width : slideWidth
            });

            // add correct classes to first and last slide
            $(slidesContainerId+" .cslide-slides-container .cslide-slide").last().addClass("cslide-last");
            $(slidesContainerId+" .cslide-slides-container .cslide-slide").first().addClass("cslide-first cslide-active");

            // initially disable the previous arrow cuz we start on the first slide
            $(slidesContainerId+" .cslide-prev").addClass("cslide-disabled");

            // if first slide is last slide, hide the prev-next navigation
            if (!$(slidesContainerId+" .cslide-slide.cslide-active.cslide-first").hasClass("cslide-last")) {           
                $(slidesContainerId+" .cslide-prev-next").css({
                    display : "block"
                });
            }

            // handle the next clicking functionality
            $(slidesContainerId+" .cslide-next").click(function(){
                var i = $(slidesContainerId+" .cslide-slide.cslide-active").index();
                var n = i+1;
                var slideLeft = "-"+n*100+"%";
                if (!$(slidesContainerId+" .cslide-slide.cslide-active").hasClass("cslide-last")) {
                    $(slidesContainerId+" .cslide-slide.cslide-active").removeClass("cslide-active").next(".cslide-slide").addClass("cslide-active");
                    $(slidesContainerId+" .cslide-slides-container").animate({
                        marginLeft : slideLeft
                    },250);
                    if ($(slidesContainerId+" .cslide-slide.cslide-active").hasClass("cslide-last")) {
                        $(slidesContainerId+" .cslide-next").addClass("cslide-disabled");
                    }
                }
                if ((!$(slidesContainerId+" .cslide-slide.cslide-active").hasClass("cslide-first")) && $(".cslide-prev").hasClass("cslide-disabled")) {
                    $(slidesContainerId+" .cslide-prev").removeClass("cslide-disabled");
                }
            });

            // handle the prev clicking functionality
            $(slidesContainerId+" .cslide-prev").click(function(){
                var i = $(slidesContainerId+" .cslide-slide.cslide-active").index();
                var n = i-1;
                var slideRight = "-"+n*100+"%";
                if (!$(slidesContainerId+" .cslide-slide.cslide-active").hasClass("cslide-first")) {
                    $(slidesContainerId+" .cslide-slide.cslide-active").removeClass("cslide-active").prev(".cslide-slide").addClass("cslide-active");
                    $(slidesContainerId+" .cslide-slides-container").animate({
                        marginLeft : slideRight
                    },250);
                    if ($(slidesContainerId+" .cslide-slide.cslide-active").hasClass("cslide-first")) {
                        $(slidesContainerId+" .cslide-prev").addClass("cslide-disabled");
                    }
                }
                if ((!$(slidesContainerId+" .cslide-slide.cslide-active").hasClass("cslide-last")) && $(".cslide-next").hasClass("cslide-disabled")) {
                    $(slidesContainerId+" .cslide-next").removeClass("cslide-disabled");
                }
            });



        });

        // return this for chainability
        return this;

    }

}(jQuery));

HTML

<section id="cslide-slides" class="cslide-slides-master clearfix">
            <div class="cslide-prev-next clearfix">
                <span class="cslide-prev">prev slide</span>
                <span class="cslide-next">next slide</span>
            </div>
            <div class="cslide-slides-container clearfix">
                <div class="cslide-slide">
                    <h2>This is slide 1</h2>
                    <p>Slide 1 Content.</p>
                </div>
                <div class="cslide-slide">
                    <h2>This is slide 2</h2>
                    <p>Slide 2 Content.</p>
                </div>
                <div class="cslide-slide">
                    <h2>This is slide 3</h2>
                    <p>Slide 3 Content.</p>
                </div>
                <div class="cslide-slide">
                    <h2>This is slide 4</h2>
                    <p>Slide 4 Content.</p>
                </div>
                <div class="cslide-slide">
                    <h2>This is slide 5</h2>
                    <p>Slide 5 Content.</p>
                </div>
            </div>
        </section><!-- /sliding content section -->

如果下一张或上一张幻灯片中的内容很长，则会调整得很好。问题是cslide-slide父div，如果下一个幻灯片内容比之前的内容短，则cslide-slides-master不会调整。

我尝试了以下代码而没有运气

$('.cslide-next').on('click', function(e){
    e.preventDefault();
    var parent = $('.cslide-slides-master'),
        child = parent.children('.cslide-slide');

    if (child.height() > parent.height()) {
        parent.height(child.height());
    }
});

有人能指出我如何解决这个问题吗？