Question

我正在尝试做响应式旋转木马，它应按比例隐藏屏幕重新调整大小的最后一项。在下面的代码中，除了一件事之外，一切正常并且做我想要的。当幻灯片移动时，项目消失并快速显示回行中的下一个项目。我需要在背景上放置一个项目，并以某种方式使其隐藏，但我找不到这样做的方法而不是失去所有项目的中心位置。

HTML

<div id="slider-wrapper">
    <div class="slider">
        <div class="slide">
            <div class="item">
                slide1
            </div>
        </div>
        <div class="slide">
            <div class="item alt">
                slide2
            </div>
        </div>
        <div class="slide">
            <div class="item">
                slide3
            </div>
        </div>
        <div class="slide">
            <div class="item alt">
                slide 4
            </div>
        </div>
    </div>  
</div>
<div id="controls">
  <div id="prev">PREV</div>  
  <div id="next">NEXT</div>  
</div>

CSS

#slider-wrapper {
    position: relative;
    margin: 50px auto;
    overflow: hidden;
    text-align: center;
    width: 100%;
    height:200px;
}
#slider-wrapper .slider {
    position: relative;
    width: 100%;
}
#slider-wrapper .slide {
    position: relative;
    display: inline-block;
    width: 250px;
    height:200px;
}
.item{
    line-height: 200px;
    background: pink;
}
.item.alt{
    line-height: 200px;
    background: red;
}
#controls{
    position: relative;
    height: 50px;
    width: 220px;
    margin: 0 auto;
}
#controls div{
    position: absolute;
    height: 50px;
    width: 100px;
    background: grey;
    color: white;
    text-align: center;
    line-height: 50px;
}
#next{
    margin-left: 120px;
}

JQuery的

var slider = function(){
    var slideWidth = $('.slide').width();

    $('.slide:last-child').prependTo('.slider');
        function moveLeft() {
        $('.slider').animate({
            left: + slideWidth
        }, 200, function () {
            $('.slide:last-child').prependTo('.slider');
            $('.slider').css('left', '');
        });
    };
    function moveRight() {
        $('.slider').animate({
            left: - slideWidth
        }, 200, function () {
            $('.slide:first-child').appendTo('.slider');
            $('.slider').css('left', '');
        });
    };
        $('#prev').on("click",function(){
        moveRight();
    });
    $('#next').on("click",function(){
        moveLeft();
    });
}
$(document).ready(function(){
    slider();
});

这里还有一个JSFiddle示例https://jsfiddle.net/Lv64275r/2/

响应轮播问题 - prependTo跳跃

0 个答案: