Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Basic slider demo
<!-- Try taking out the overflow:hidden to see more visually how the whole things works -->
<style>
.onramp {
width:500px;
height:500px;
overflow: hidden;
border: 5px solid black;
}
.inner {
position:relative;
width:100%;
height:100%;
margin-left:0px;
transition: 0.3s;
}
.onrampbox {
background-color:#666666;
color: white;
position:absolute;
width:500px;
height:500px;
}
#buttonbar {
width:500px;
text-align:center;
}
#buttonbar a {
font-size:2em;
font-weight:bold;
color:black;
text-decoration:none;
}
</style>
<div class="onramp">
<div class="inner">
<div class="onrampbox" style="left:0px;">
<h2>Page 1</h2>
<p>Lorem summo saepe ei, tota movet ut duo. At nec nulla homero equidem. Lorem simul ut usu, an sea reque falli detracto. Cu duo saperet vituperatoribus, ius case intellegat ex. Sea an scripta malorum efficiantur, ad cum iriure moderatius elaboraret.</p>
<p>Nibh iusto maiorum has ut, vix omittam theophrastus at. Vero quidam commodo pri ex, movet offendit mediocrem mea te. Agam impetus disputationi his ex, no esse oportere laboramus ius, everti prompta mei id. Mei zril mandamus te. Alia oportere prodesset pri no, quo te nostrum probatus persequeris.</p>
<p>Altera detracto incorrupte sed ei, prodesset voluptatum ea vim. Eu tation deleniti eos, pri suscipit scripserit accommodare ad, per falli graece postulant eu. Id altera melius propriae sea. Dicam vulputate assueverit vix id, eros tota reque mea ad. Dolor perpetua conclusionemque et est, an nam eius fastidii reformidans. Eum ei tollit vivendum, vis ea quis intellegat mnesarchum. Erat praesent ad mea.</p>
<p>Te singulis sensibus intellegam mea, commodo invenire in mei. Est omnis illum referrentur ne. Te tractatos forensibus sed, cum cu nominati pertinacia, eam ut alienum gubergren interesset. Et vim iracundia concludaturque, ut accusam facilisi nam. Mei dolore populo eu. Eum ea tritani ceteros voluptatibus.</p>
<p>An his wisi omnis prompta. Suavitate referrentur nam ut, amet utamur iuvaret est at, et unum patrioque usu. Tation fastidii no has, in ius purto graece graeci. Vel te nominavi complectitur, id tibique consetetur ius.</p>
</div>
<div class="onrampbox" style="left:500px;">
<h2>Page 2</h2>
<p>Et has cetero fierent, eius graece intellegebat cu est, ei ridens quaestio nam. Pro ad stet accommodare. Pro an mandamus repudiare, harum instructior ex has. Sea ut cibo alterum assueverit. Vidit phaedrum nominati mea id, et deleniti vituperata eos, an nonumy nominavi vituperatoribus per.</p>
<p>Eum id unum oblique, cu vim nobis electram sapientem. Laoreet mediocrem dignissim sit te, ea qui porro partiendo. Mea ad timeam aperiri. At augue blandit commune per.</p>
<p>Vis ut facilisi consectetuer. Ipsum fastidii per an. Dictas aliquip accumsan ne pro, ius purto dolores philosophia ex, pri te commune accumsan prodesset. Cu falli ludus tamquam has, vel ridens iisque conceptam ne.</p>
<p>Eu dicat sanctus veritus est, laudem feugait salutatus te mei, nec quas democritum te. Ius ex tamquam vivendo, pri ne officiis detraxit. Sonet consul cu usu. Vix ad malorum phaedrum, sit case recteque ei. Vix te nisl decore omittam, duo ne quot definitiones. Antiopam similique ne his. Eum dicant apeirian corrumpit eu.</p>
<p>Ea quod modus euismod vel, no altera aperiam pri. Est ex aperiri dissentias conclusionemque, et utroque recteque per. Vis choro ridens ea, te oblique vivendo hendrerit per, lorem detracto iracundia ne mei. Aperiam aliquam expetendis cu pri.</p>
</div>
<div class="onrampbox" style="left:1000px;">
<h2>Page 3</h2>
<p>Et accusamus sadipscing consectetuer vel, cum nihil saepe delicata ut. Et qui vero epicuri democritum, an pri dolore antiopam. Id mel habemus definitionem, minimum oporteat concludaturque per an. Ei mei maiorum qualisque efficiendi, eam illum malorum no. Splendide temporibus pri ad, argumentum reprimique sea ex, pertinax senserit has an.</p>
<p>Eos idque blandit detracto cu, usu at atqui dicant homero. Audiam mediocrem no his. Sit solum nemore copiosae in, vix lorem voluptua accusamus ad. Agam recteque adolescens sea ut. Nominavi constituto ad sea, detraxit pericula vituperata per an. Id eos choro laoreet, oratio mentitum vel in.</p>
<p>Eam modus eirmod vivendum ad, nobis populo erroribus ut nec. Te error ubique dissentiunt quo. Cum an reque inani recteque, mea ne meis equidem, case graeci appellantur et vim. Vix erat veritus incorrupte id, ne vide expetenda cotidieque sed.</p>
<p>Viris nonumy ea mea, sed prima vitae eu. Mea quaeque copiosae facilisis eu. Duo ea velit vidisse integre, ea vix veri nostro labores, sit integre cotidieque ut. Tota aliquip tincidunt his ea, mel at impetus reprimique.</p>
<p>Ius tation democritum eu, est detracto sapientem percipitur cu. Pri et wisi saperet, usu quot malis cu. Ubique oblique mea at. Nec ullum disputando cu. Alii clita te nam, ei vis minim hendrerit, ut veri facilisis quo. Ut vocibus accommodare eum, cu usu dico facer persecuti.</p>
</div>
</div>
</div>
<div id="buttonbar">
<a href="javascript:;" data-pos="0px">1</a>
<a href="javascript:;" data-pos="-500px">2</a>
<a href="javascript:;" data-pos="-1000px">3</a>
</div>
<script>
$('#buttonbar').on('click', 'a', function() {
var pos = $(this).data('pos');
$('.inner').css('margin-left', pos)
});
</script>
@jeffcogswell

This comment has been minimized.

Copy link
Owner Author

@jeffcogswell jeffcogswell commented Dec 14, 2015

@jeffcogswell

This comment has been minimized.

Copy link
Owner Author

@jeffcogswell jeffcogswell commented Dec 14, 2015

Can also use transforms, just easily, as in here: http://css3.bradshawenterprises.com/sliding/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment