- Lightweight
- Customizable with CSS
- Easy to use
It's as simple as
$(document).ready(function() {
scroll({
slides: [
'slide-1',
'slide-2'
],
transition: 'slide'
});
});
<html>
<head>
<title>scroll.js by RetroAsgardian</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<script src="http://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="scroll.js"></script>
<script>
$(document).ready(function() {
scroll({
slides: [
'slide-1',
'slide-2'
],
transition: 'slide'
});
});
</script>
<div class="slide first-slide" id="first-slide">
<p class="title">Presentation Title</p>
</div>
<div class="slide" id="slide-1">
<p class="large">Lorem ipsum</p>
</div>
<div class="slide" id="slide-2">
<p class="large">dolor sit amet</p>
</div>
</body>
</html>
scroll.js uses the following options:
scroll({
slides: Array containing element IDs of slides to show,
transition: 'fade' or 'slide'
});
However, you can modify every aspect of the appearance by editing style.css.