Question

制定了解决方案，请参见底部！

我正在尝试使用响应式旋转木马（液体）。我将元素堆叠在一起，以便宽度可以是流动的，具体取决于父级的宽度。问题是我需要父母隐藏溢出，这对绝对定位的孩子来说是不可能的。

清理JS的提示也很受欢迎！

有没有人有任何想法如何改善这个或替代品？继承人：http://jsfiddle.net/j35fy/5/

.carousel-wrap {
    position: relative;
}

.carousel-item {
    position: absolute;
    top: 0;
}

$.fn.mwCarousel = function(options) {
    //Default settings.
    var settings = $.extend({
        changeWait: 3000,
        changeSpeed: 800,
        reveal: false,
        slide: true,
        autoRotate: true
    }, options );

    var CHANGE_WAIT = settings.changeWait;
    var CHANGE_SPEED = settings.changeSpeed;
    var REVEAL = settings.reveal;
    var SLIDE = settings.slide;
    var AUTO_ROTATE = settings.autoRotate;
    var $carouselWrap = $(this);
    var SLIDE_COUNT = $carouselWrap.find('.carousel-item').length;
    var rotateTimeout;

    if (AUTO_ROTATE) {
        rotateTimeout = setTimeout(function(){
            rotateCarousel(SLIDE_COUNT-1);
        }, CHANGE_WAIT);
    }

    function rotateCarousel(slide) {
        if (slide === 0) {
            slide = SLIDE_COUNT-1;
            rotateTimeout = setTimeout(function(){
                $('.carousel-item').css('margin', 0);
                $('.carousel-item').show();
            }, CHANGE_WAIT);
            if (REVEAL) {
                $($carouselWrap.find('.carousel-item')[slide]).slideToggle(CHANGE_SPEED);
            } else if (SLIDE) {
                var carouselItem = $($carouselWrap.find('.carousel-item')[slide]);
                carouselItem.show();
                var itemWidth = carouselItem.width();
                carouselItem.animate({margin: 0}, CHANGE_SPEED);
            } else {
                $($carouselWrap.find('.carousel-item')[slide]).fadeIn(CHANGE_SPEED);
            }

            slide = slide+1;
        } else {
            if (REVEAL) {
                $($carouselWrap.find('.carousel-item')[slide]).slideToggle(CHANGE_SPEED);
            } else if (SLIDE) {
                var carouselItem = $($carouselWrap.find('.carousel-item')[slide]);
                var itemWidth = carouselItem.width();
                carouselItem.animate({marginLeft: -itemWidth, marginRight: itemWidth}, CHANGE_SPEED);
            } else {
                $($carouselWrap.find('.carousel-item')[slide]).fadeOut(CHANGE_SPEED);
            }
        }

        rotateTimeout = setTimeout(function(){
            rotateCarousel(slide-1);
        }, CHANGE_WAIT);
    }
}

$('.carousel-wrap').mwCarousel();

解决方案 第一张幻灯片实际上从未移动（最后一张可见），因此一个设置为position：static，并且一切正常。

Answer 1

我认为只需更改你的CSS就可以了：

.carousel-wrap {
    position: relative;
    overflow:hidden;
    height:80%;
    width:90%;
}

演示：http://jsfiddle.net/robschmuecker/j35fy/2/

Answer 2

发现解决方案实际上很简单，因为DOM中的第一张幻灯片（你看到的最后一张）从未实际移动过，我可以将一张幻灯片设置为静态，因此轮播包裹将相应地设置它的高度。

http://jsfiddle.net/j35fy/7/

.container {
    background: aliceblue;
    padding: 3em;
}
.carousel-wrap {
    position: relative;
    overflow:hidden;
}
.carousel-item:first-child {
    position:static;
}

.carousel-item {
    position: absolute;
    top: 0;
    width: 100%;
}
img {
    width: 100%;
}

将父母与绝对孩子匹配？（响应式转盘）

2 个答案:

将父母与绝对孩子匹配？ （响应式转盘）

2 个答案:

将父母与绝对孩子匹配？（响应式转盘）