滑块滑块未对齐？

Question

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

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});

});

Answer 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/

Answer 2

发生这种情况是因为两张幻灯片同时显示在包装器中。由于自然 html 流

这使得第二个进入下一行

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

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

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

滑块滑块未对齐？

Slider slides are not aligned?

html

css

jquery

slider

carousel