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 等的所有组合,但无法正常工作。
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
进行动画处理
我有一个教程箱,里面有大约 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 等的所有组合,但无法正常工作。
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
进行动画处理