Basic HTML Slideshow

Developer
Tommy Hodgins
Size
3,386 Kb
Views
66,759

How do I make an basic html slideshow?

Making a slideshow I can use for presentations using HTML, CSS and JavaScript. What is a basic html slideshow? How do you make a basic html slideshow? This script and codes were developed by Tommy Hodgins on 12 July 2022, Tuesday.

Basic HTML Slideshow Previews
IQ Test

Basic HTML Slideshow - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Basic HTML Slideshow</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Fira+Sans:300,400,500,700,300italic,400italic,500italic,700italic'>
<link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic'>
<link rel='stylesheet prefetch' href='http://s3-us-west-2.amazonaws.com/s.cdpn.io/67439/basic.css'>
<link rel='stylesheet prefetch' href='http://staticresource.s3.amazonaws.com/data-buttons.css'>
<link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Source+Code+Pro:300,400,500,600,700,900'>
<link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700,700italic,900,900italic'>
<link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=PT+Serif:400,700,400italic,700italic'>
<link rel='stylesheet prefetch' href='http://staticresource.s3.amazonaws.com/basic.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <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> <script src="js/index.js"></script>
</body>
</html>

Basic HTML Slideshow - Script Codes CSS Codes

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: 1px solid currentColor !important; border-radius: 2px; 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; }
}

Basic HTML Slideshow - Script Codes JS Codes

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) }
})
Basic HTML Slideshow - Script Codes
Basic HTML Slideshow - Script Codes
Home Page Home
Developer Tommy Hodgins
Username tomhodgins
Uploaded July 12, 2022
Rating 4.5
Size 3,386 Kb
Views 66,759
Do you need developer help for Basic HTML Slideshow?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tommy Hodgins (tomhodgins) Script Codes
Name
Highlighted Search Term
10 CSS Text Shadows
Using JavaScript variables in CSS
My CSS Wishlist
Self-Responsive Social Buttons
Responsive Scrolling Sticky Header
Matching height via EH units
A Parent Selector for CSS
CSS Parent Selector
Element Query Demo with EQCSS
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!