滑块幻灯片未对齐？答案

【问题标题】：Slider slides are not aligned?滑块幻灯片未对齐？
【发布时间】：2015-01-22 05:17:42
【问题描述】：

我有一个图像滑块，我将其转换为文本以淡入淡出引号，出于某种原因，每次加载新幻灯片时，它都会在容器底部闪烁，然后将其播放。有谁知道这可能是什么？

HTML：

<section id="slider" class="container">
<ul class="slider-wrapper">
<li class="current-slide">
<div class="quote">This is a product quote and testimonial.. blah blah blah, DonorPro is very good, <span>blah blah blah, DonorPro is very good</span>.
<div class="author">Random Company/Orgainization&nbsp;</div>
</div>
</li>
<li>
<div class="quote">This is a product quote and testimonial.. blah blah blah, DonorPro is very good, <span>blah blah blah, DonorPro is very good</span>.
<div class="author">Random Company/Orgainization 2&nbsp;</div>
</div>
</li>
<li>
<div class="quote">This is a product quote and testimonial.. blah blah blah, DonorPro is very good, <span>blah blah blah, DonorPro is very good</span>.
<div class="author">Random Company/Orgainization 3&nbsp;</div>
</div>
</li>
</ul>
</section>

JS：

$(function() {

     var SliderModule = (function() {
        var pb = {};
        pb.el = $('#slider');
        pb.items = {
            panels: pb.el.find('.slider-wrapper > li'),
        }

        var SliderInterval,
            currentSlider = 0,
            nextSlider = 1,
            lengthSlider = pb.items.panels.length;

        pb.init = function(settings) {
            this.settings = settings || {duration: 8000};
            var items = this.items,
                lengthPanels = items.panels.length,
                output = '';

            for(var i = 0; i < lengthPanels; i++) {
                if(i == 0) {
                    output += '<li class="active"></li>';
                } else {
                    output += '<li></li>';
                }
            }

            activateSlider();
            $('#control-buttons').on('click', 'li', function(e) {
                var $this = $(this);
                if(!(currentSlider === $this.index())) {
                    changePanel($this.index());
                }
            });

        }

        var activateSlider = function() {
            SliderInterval = setInterval(pb.startSlider, pb.settings.duration);
        }

        // Funcion para la Animacion
        pb.startSlider = function() {
            var items = pb.items,
                controls = $('#control-buttons li');
            // Comprobamos si es el ultimo panel para reiniciar el conteo
            if(nextSlider >= lengthSlider) {
                nextSlider = 0;
                currentSlider = lengthSlider-1;
            }

            controls.removeClass('active').eq(nextSlider).addClass('active');
            items.panels.eq(currentSlider).fadeOut('slow');
            items.panels.eq(nextSlider).fadeIn('slow');

            currentSlider = nextSlider;
            nextSlider += 1;
        }

        var changePanel = function(id) {
            clearInterval(SliderInterval);
            var items = pb.items,
                controls = $('#control-buttons li');

            if(id >= lengthSlider) {
                id = 0;
            } else if(id < 0) {
                id = lengthSlider-1;
            }

            controls.removeClass('active').eq(id).addClass('active');
            items.panels.eq(currentSlider).fadeOut('slow');
            items.panels.eq(id).fadeIn('slow');


            currentSlider = id;
            nextSlider = id+1;

            activateSlider();
        }

        return pb;
     }());

     SliderModule.init({duration: 5000});

});

【问题讨论】：

标签： jquery html css slider carousel

【解决方案1】：

嘿，我认为问题在于你正在这样做

items.panels.eq(nextSlider).fadeOut('slow');
items.panels.eq(nextSlider).fadeIn('slow');

我所做的是自动隐藏它并淡入。

items.panels.eq(currentSlider).hide();
items.panels.eq(nextSlider).fadeIn('slow');

这是 JSFiddle 代码：http://jsfiddle.net/eu1rqh1z/3/

【讨论】：

我明白了！效果很好，非常感谢您的快速回答！（因为我还不能接受，所以会在 7 分钟内接受答案）

【解决方案2】：

这是因为两张幻灯片同时显示在包装器中。由于自然的 html 流，这使得第二个进入下一行

一种解决方案是使包装器相对，而幻灯片绝对，这样一个会消失，而另一个会出现，并且仍然在正确的位置。

.slider-wrapper > li {
    position: absolute;
}

JSFiddle 演示：http://jsfiddle.net/eu1rqh1z/4/

【讨论】：