Html 具有从侧面可见幻灯片和肋骨动画的滑块 1.滑块动画shema n1

2.滑块动画shema n2 假设有两个滑块，一个在另一个后面。两者同步移动到同一侧。第一个随着惯性移动，开始拉伸，底部的一个（主要的一个）开始从开始移动

3.这就是它在浏览器中的外观

4.这就是我迄今为止所取得的成就 HTML

JS

$（函数（）{
var content=“#ghostCarousel#content”；
var部分=内容+'>div'；
var v=$（window.width（）；
var w=$（节）.width（）；
var c；
var itemuKiekis=$（'#content div'）.length；
维杜里尼诺变种；
var paddingPlotis=30；
var itemuSarasas=[]；
函数ghostCarousel（）{
对于（var i=1；i，这个问题相当广泛，但您可以这样做

li{
display:inline-block;
}
li .arrows{
 position:relative;
 top:50%;

}

我发现了一个名为SimplyScroll的JavaScript库，它允许手动从一侧到另一侧对一组图像进行扫描，这似乎是您的意图

我还发现，这似乎符合您的确切规格。
您的问题是什么？我的确切问题是-如何格式化ul、li标签以实现滑块的结构，如照片中所示，这些滑块中的每一个都应该是可拖动的，还是一个滑块的移动会影响另一个滑块的移动？不清楚滑块是如何支持的根据给出的图片判断，我已经开始工作了。当你单击“下一步”时，从左到中的幻灯片转到中间，中间的幻灯片转到左，如scheme中所示。我可以自己编写js，但我不知道如何编写css。。
html, body {
padding:0;
margin:0;
}
#ghostCarousel {
    overflow: hidden;
    /*position: relative;*/
}
#ghostCarousel #content > div {
    width: 820px;
    height: 330px;
    float: left;
    position: relative;
    /*  nuemus padding reikia padding ploti nustatyt i 0*/
    padding-left:15px;
    padding-right: 15px;
    /*z-index: 99;*/
}
#ghostCarousel #content > div > img {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    /* Firefox 10+, Firefox on Android */
    filter: gray;
    /* IE6-9 */
    -webkit-filter: grayscale(100%);
    /* Chrome 19+, Safari 6+, Safari 6+ iOS */
    /*z-index: 99;*/
}
#content .active {
    z-index: 9999;
}
#content .active img {
    /*background: #FFF;*/
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale") !important;
    -webkit-filter: grayscale(0%) !important;
}
.bg-block {
    width:880px;
    height: 500px;
    position: absolute;
    top: 0px;
    left: 50%;
    margin-left: -440px;
    background: #FFF;
    /*z-index: 100;*/
}
#gcNav {
    width: 960px;
    position: absolute;
    top: 135px;
    left: 50%;
    /* move the left edge to the center … */
    margin-left: -480px;
    /* … and move it to the left half the box’ width. */
    /*z-index: 9999;*/
}
#gcNav a {
    display: block;
    width: 40px;
    height: 80px;
    background: url("http://bisonai.infoaleja.lt/wp-content/themes/bisonai/img/controls.png") no-repeat;
}
#gcNav .left {
    background-position: 0 0;
    float: left;
}
#gcNav .right {
    background-position: -40px 0;
    float: right;
}

    $(function () {
    var content = '#ghostCarousel #content';
    var section = content + ' > div';

    var v = $(window).width();
    var w = $(section).width();
    var c;
    var itemuKiekis = $('#content div').length;
    var vidurinioNr;
    var paddingPlotis = 30;
    var itemuSarasas = [];

    function ghostCarousel() {



        for (var i = 1; i <= itemuKiekis; i++) {
            itemuSarasas[i] = $('#content div:nth-child(' + (i) + ')').html();
            $('#content h3').hide();
            $('#content p').hide();
            //console.log(itemuSarasas[i]);
        }

        if (itemuKiekis % 2 === 0) {
            c = ((w + paddingPlotis) * $(section).length - v + w) / 2;
            vidurinioNr = itemuKiekis / 2 + 1;

            var index = 1;
            for (var i = vidurinioNr; i <= itemuKiekis; i++) {
                $('#content div:nth-child(' + i + ')').html(itemuSarasas[index]);
                $('#content div:nth-child(' + index + ')').html(itemuSarasas[i]);
                console.log("i:" + i + " index:" + index);
                index++;
            }

            for (var i = 1; i <= vidurinioNr; i++) {
                $('#content div:nth-child(' + i + ')').html(itemuSarasas[index]);
                console.log("i:" + i + " index:" + index);
                index++;
            }
        } else {
            c = ((w + paddingPlotis) * $(section).length - v) / 2;
            vidurinioNr = (itemuKiekis + 1) / 2;

            var index = 1;
            for (var i = vidurinioNr; i <= itemuKiekis; i++) {
                $('#content div:nth-child(' + i + ')').html(itemuSarasas[index]);
                //console.log("i:" + i);
                index++;
            }

            for (var i = 1; i < vidurinioNr; i++) {
                $('#content div:nth-child(' + i + ')').html(itemuSarasas[index]);
                console.log("i:" + i);
                index++;
            }
        }

        $('#content div:nth-child(' + vidurinioNr + ')').attr("class", "active");

        console.log("v:" + v);
        console.log("w:" + w);
        console.log("c:" + c);
        console.log("itemuKiekis:" + itemuKiekis);
        console.log("vidurinioNr:" + vidurinioNr);

        //TODO: keisti ilgi kad tilptu visos ft, jei netelpa
        $(content).width((w + paddingPlotis * 2) * $(section).length);
        $(content).css('margin-left', -c);

        $('#gcNav a.left').click(function (e) {
            e.preventDefault();


            if ($(content).is(':animated')) return false;
            $('#content .active h3').fadeOut();
            $('#content .active p').fadeOut();
            $('#content div:nth-child(' + (vidurinioNr + 1) + ')').attr("class", "active");
            $('#content div:nth-child(' + (vidurinioNr) + ')').removeClass("active");

            $(content).animate({
                marginLeft: '-=' + w
            }, 500, function () {
                var first = $(section).eq(0);
                $(section).eq(0).remove();
                $(this).animate({
                    marginLeft: '+=' + w
                }, 0);
                $(this).append(first);

                $('#content .active h3').fadeIn();
                $('#content .active p').fadeIn();
            });
        });
        $('#gcNav a.right').click(function (e) {
            e.preventDefault();
            if ($(content).is(':animated')) return false;
            $('#content .active h3').fadeOut();
            $('#content .active p').fadeOut();
            $('#content div:nth-child(' + (vidurinioNr - 1) + ')').attr("class", "active");
            $('#content div:nth-child(' + (vidurinioNr) + ')').removeClass("active");
            $(content).animate({
                marginLeft: '+=' + w
            }, 500, function () {
                var end = $(section).length - 1;
                var last = $(section).eq(end);
                $(section).eq(end).remove();
                $(this).animate({
                    marginLeft: '-=' + w
                }, 0);
                $(this).prepend(last);

                //$('#content div:nth-child(' + vidurinioNr + ')').attr("class","active");
                $('#content .active h3').fadeIn();
                $('#content .active p').fadeIn();
            });
        });

    }

    ghostCarousel();

    $(window).resize(function () {
        v = $(window).width();
        w = $(section).width();
        c = ((w + paddingPlotis) * $(section).length - v) / 2;
        $(content).css('margin-left', -c);

    });
});

li{
display:inline-block;
}
li .arrows{
 position:relative;
 top:50%;

}