I created a tutorial box with 4 slides (2 for this (demo)).
My goal is to make the slides slide from right to left when the user clicks next. I have been able to achieve this, however, the elements are displaying on top of each other instead of side by side.
To accomplish this, I used 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>
How can I effectively display them side by side? I've tried various combinations like display:inline-block but haven't been successful.
Ps. Yes, I am aware of plugins that can do this, but I prefer understanding the process myself.