jQuery 幻灯片元素出现在彼此下方(应该并排)

jQuery Slide Elements appearing below each other (should be side by side)

我有一个教程箱,里面有大约 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

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

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

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

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

嗯,滑块的一般想法是有一个项目包装器 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

进行动画处理