Skip to content

Instantly share code, notes, and snippets.

@kokkonis

kokkonis/Basic HTML Slideshow.markdown

Created April 10, 2016 16:20
Show Gist options
  • Save kokkonis/732f7677c120306adde4ad317d9da05c to your computer and use it in GitHub Desktop.
Save kokkonis/732f7677c120306adde4ad317d9da05c to your computer and use it in GitHub Desktop.
Download ZIP
Basic HTML Slideshow
Raw
Basic HTML Slideshow.markdown
Raw
index.html
<section data-slideshow>
<article data-slide data-theme=dark>
<h1>HTML Slideshow</h1>
<h2>Slideshow Built using HTML, CSS, and JS</h2>
<p>Use <code>left</code> and <code>right</code> arrow keys to navigate, or use the buttons below</p>
</article>
<article data-slide>
<h1>Default Slide</h1>
<h2>Subheadline</h2>
<p>Also try swiping on touchscreens&hellip;</p>
</article>
<article data-slide data-theme=dark>
<h1>Dark Slide</h1>
<h2>Subheadline</h2>
</article>
<article data-slide data-theme=code>
<h1>Code Themed Slide</h1>
<h2>Subheadline</h2>
</article>
<article data-slide data-theme=book>
<h1>Book Themed Slide</h1>
<h2>Subheadline</h2>
</article>
<nav>
<input type=button data-button=outline value=&lt; onclick=move('prev') ontouchstart=move('prev')>
<input type=button data-button=outline value=&gt; onclick=move('next') ontouchstart=move('next')>
</nav>
</section>
Raw
script.js
var slideshow = document.querySelector('[data-slideshow]')
slides = slideshow.querySelectorAll('[data-slide]')
for (j=0;j<slides.length;j++){
slides[j].setAttribute('data-slide',j)
}
var count = 0
function move(direction){
if (direction == 'prev'){
if (document.querySelector('[data-slideshow] [data-slide="'+(count-1)+'"]')){
document.querySelector('[data-slideshow] [data-slide="'+(count-1)+'"]').style.left = '-100vw'
}
document.querySelector('[data-slideshow] [data-slide="'+count+'"]').style.left = '0'
if (document.querySelector('[data-slideshow] [data-slide="'+(count+1)+'"]')){
document.querySelector('[data-slideshow] [data-slide="'+(count+1)+'"]').style.left = '100vw'
}
if (count-1 >= 0){
count--
}
}
if (direction == 'next'){
document.querySelector('[data-slideshow] [data-slide="'+count+'"]').style.left = '-100vw'
if (document.querySelector('[data-slideshow] [data-slide="'+(count+1)+'"]')){
document.querySelector('[data-slideshow] [data-slide="'+(count+1)+'"]').style.left = '0'
}
if (document.querySelector('[data-slideshow] [data-slide="'+(count+2)+'"]')){
document.querySelector('[data-slideshow] [data-slide="'+(count+2)+'"]').style.left = '100vw'
count++
}
}
}
// Arrow keys to navigate
document.onkeyup = function(e){
e.preventDefault()
var charCode = e.which;
charCode==37 && move('prev')
charCode==39 && move('next')
}
// Swipe to Navigate
var gesture = {
x: [],
y: [],
match: ''
},
tolerance = 100;
window.addEventListener('touchstart',function(e){
e.preventDefault()
for (var i=0; i<e.touches.length; i++){
var dot = document.createElement('div');
dot.id = i
dot.style.top = e.touches[i].clientY-25+'px'
dot.style.left = e.touches[i].clientX-25+'px'
document.body.appendChild(dot)
gesture.x.push(e.touches[i].clientX)
gesture.y.push(e.touches[i].clientY)
}
});
window.addEventListener('touchmove',function(e){
for (var i=0; i<e.touches.length; i++) {
var dot = document.getElementById(i);
dot.style.top = e.touches[i].clientY-25+'px'
dot.style.left = e.touches[i].clientX-25+'px'
gesture.x.push(e.touches[i].clientX)
gesture.y.push(e.touches[i].clientY)
}
});
window.addEventListener('touchend',function(e){
var dots = document.querySelectorAll('div'),
xTravel = gesture.x[gesture.x.length-1] - gesture.x[0],
yTravel = gesture.y[gesture.y.length-1] - gesture.y[0];
if (yTravel<tolerance && yTravel>-tolerance && xTravel<-tolerance){
move('next')
}
if (yTravel<tolerance && yTravel>-tolerance && xTravel>tolerance){
move('prev')
}
gesture.x = []
gesture.y = []
gesture.match = xTravel = yTravel = ''
for (i=0;i<dots.length;i++){
dots[i].id = ''
dots[i].style.opacity = 0
setTimeout(function(){
document.body.removeChild(dots[i])
},1000)
}
})
Raw
style.css
html,body {
margin: 0;
padding: 0;
max-width: none;
width: 100%;
height: 100%;
overflow-x: hidden;
}
[data-slideshow] {
margin: 0;
padding: 0;
position: relative;
}
[data-slide] {
position: absolute;
left: 100vmax;
z-index: 50;
transition: left .5s ease-in-out;
overflow-y: scroll;
}
[data-slide]:first-of-type {
left: 0;
}
[data-slideshow] nav {
margin: 0;
padding: 0;
position: fixed;
bottom: 1em;
right: .75em;
z-index: 100;
}
[data-slideshow] nav input {
font-size: 18pt !important;
margin: 0 .25em !important;
width: auto !important;
min-width: 2.25em;
background: rgba(0,0,0,.5) !important;
color: white !important;
border-color: currentColor !important;
text-shadow: rgba(0,0,0,.7) 1px 1px 0 !important;
box-shadow: inset rgba(0,0,0,.15) 1px 1px 0;
transition: color .1s ease-in-out;
}
[data-slideshow] nav input:focus,
[data-slideshow] nav input:hover {
color: white !important;
background: rgba(0,0,0,.7) !important;
}
[data-slideshow] nav input:active {
color: #0cf !important;
background: rgba(0,0,0,.7) !important;
}
[data-slide] h1 {
margin: 10vmin 0 4vmin 0 !important;
font-size: 12vmin !important;
}
[data-slide] h1 + h2 {
margin-top: -4vmin !important;
font-size: 5.5vmin !important;
}
[data-slide] p {
margin: 0 auto;
max-width: 80%;
font-size: 6vmin;
text-align: center;
}
@media (orientation: portrait) {
[data-slideshow],
[data-slide] {
width: 100vmin;
height: 100vmax;
}
}
@media (orientation: landscape) {
[data-slideshow],
[data-slide] {
width: 100vmax;
height: 100vmin;
}
}
Raw
styles
<link href="http://fonts.googleapis.com/css?family=Fira+Sans:300,400,500,700,300italic,400italic,500italic,700italic" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic" rel="stylesheet" />
<link href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/67439/basic.css" rel="stylesheet" />
<link href="http://staticresource.com/data-buttons.css" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Source+Code+Pro:300,400,500,600,700,900" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700,700italic,900,900italic" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=PT+Serif:400,700,400italic,700italic" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Fira+Sans:300,400,500,700,300italic,400italic,500italic,700italic" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic" rel="stylesheet" />
<link href="http://staticresource.com/basic.css" rel="stylesheet" />
<link href="http://staticresource.com/data-buttons.css" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Source+Code+Pro:300,400,500,600,700,900" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700,700italic,900,900italic" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=PT+Serif:400,700,400italic,700italic" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment