jQuery幻灯片元素出现在彼此下方（应该是并排）

Question

我有一个教程框，其中有大约4张幻灯片（2 for this (demo)）。

我的目标是让用户点击下一张幻灯片从右向左滑动。我设法让这个工作，但元素显示一个在另一个之上 - 而不是并排。

我已经使用jQuery UI实现了这个目标：

function guide() {
    // Controls for the welcome guide
    //guideCurrentItem = guideCurrentItem + 1;
    $("#1").hide('slide', { direction: 'left' }, 2000);
    $("#2").show('slide', { direction: 'right' }, 2000);
}

HTML：

<div class="welcome">
    <div class="holder">
        <div class="item" id="1">
            <div class="hero">

            </div>
            <div class="content">
                <h1>Read online, quickly and easily.</h1>
                <p>Get started now with our user guide, or <a href="/Home/Read">jump ahead</a> if you know you're setup.</p>
                <p class="align-center"><span class="button" onclick="guide()">Next</span></p>
                <div class="dots">

                </div>
            </div>
        </div>
            <div class="item offscreen" id="2">
                <div class="hero">

                </div>
                <div class="content">
                    <h1>Connect.</h1>
                    <p></p>
                    <p>Get started now with our user guide, or <a href="/Home/Read">jump ahead</a> if you know you're setup.</p>
                    <p class="align-center"><span class="button">Next</span></p>
                    <div class="dots">

                    </div>
                </div>
            </div>
        <div class="spacing"></div>
        <p class="align-center"><input type="checkbox" id="chkShowHelp" checked /> Hide this welcome screen the next time I visit</p>
    </div>
</div>

如何制作它以便以最有效的方式并排展示？我已经尝试了所有显示组合：内联块等但无法使其工作。

JS Fiddle

聚苯乙烯。是的我知道有很多插件可以做到这一点 - 但这并不能完全帮助知识库。

Answer 1

给.item一个position: absolute; https://jsfiddle.net/3phsesjc/4/

之后，您只需要将其设计为更好看。

    .welcome .holder .item {
        position: absolute;
}

Answer 2

嗯，滑块的一般想法是有一个物品包装 width = items * items_width然后在此包装器周围移动以转到所选项目。

    <div class="holder">
       <div class="items-wrapper" style='width:900px'>
         <div class="item" id="1"></div>
         <div class="item" id="2"></div>
       </div>
    </div>

使用这种方法，您不必显示或隐藏您只需更改items-wrapper的marginLeft值的元素。 您可以使用jquery和css

的动画进行数学运算