出现在彼此下方的 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>

我怎样才能使它们以最有效的方式并排显示？我已经尝试了 display:inline-block 等的所有组合，但无法正常工作。

JS Fiddle

附言。是的，我知道有很多插件可以执行此操作 - 但这并不能完全帮助知识库。

Answer 1

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

之后，您只需要对其进行样式设置以使其看起来更好。

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