Forked from AlanSimpsonMe/Responsive Slide Show with Thumbnails
Created
November 7, 2020 22:59
-
-
Save SLeitgeb/80612c5483187b355c72d7bdebcc2206 to your computer and use it in GitHub Desktop.
Responsive Slide Show with Thumbnails - HTML, CSS, and JavaScript only.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
<title>Photo Carousel</title> | |
<style> | |
/* This is the box that shows the large image */ | |
#slideshow { | |
/* Style to taste */ | |
width: 100%; | |
/* 75% is for a 4:3 aspect ratio, use 56.25% for 16:9 */ | |
padding-bottom: 75%; | |
border: solid 1px black; | |
border-radius: 4px; | |
background-position: center; | |
background-repeat: no-repeat; | |
background-size: cover; | |
background-color: #1e1e1e; | |
position: relative; | |
transition: 0.5s; | |
position: relative; | |
} | |
/* This is for the left and right scrolling arrows */ | |
#slideshow img { | |
position: absolute; | |
height: 80px; | |
opacity: .5; | |
} | |
/* Left scrolling arrow */ | |
#slideshow img.left { | |
left: 8px; | |
} | |
/* Right scrolling arrow */ | |
#slideshow img.right { | |
right: 8px; | |
} | |
/* Small clickable thumbnail pictures at the bottom */ | |
#filmstrip { | |
height: 62px; | |
width: 80%; | |
margin: 0.5em auto; | |
display: flex; | |
flex-direction: row; | |
flex-wrap: nowrap; | |
justify-content: flex-end; | |
align-items: center; | |
overflow: hidden; | |
overflow-x: scroll; | |
} | |
/* Each small thumbnail image */ | |
#filmstrip img { | |
display: flex; | |
height: 88%; | |
margin-right: 6px; | |
} | |
/* Highlight for thumbnail image that represents the large picture that's showing */ | |
.bordered { | |
box-shadow: 0 0 4px 4px purple; | |
} | |
/* Wide screen */ | |
@media screen and (min-width: 500px) { | |
#container { | |
width: 60%; | |
margin: 1em auto; | |
} | |
#slideshow img { | |
top: 45%; | |
} | |
} | |
/* Narrow screen */ | |
@media screen and (max-width: 499px) { | |
#container { | |
width: 90%; | |
margin: 0 auto; | |
} | |
#slideshow img { | |
top: 30%; | |
} | |
} | |
</style> | |
</head> | |
<body> | |
<div id="container"> | |
<!-- Large image with scrolling arrows--> | |
<div id="slideshow"> | |
<img src="left.png" class="left" alt="left" title="left" onclick="slide(-1)"> | |
<img src="right.png" class="right" alt="right" title="right" onclick="slide(1)"> | |
</div> | |
<!-- Small thumbnail images --> | |
<div id="filmstrip"></div> | |
</div> | |
<!-- Put this code near the bottom of the page, just before the closing /body tag --> | |
<script> | |
//For this to work, images must be named img01.jpg, img02.jpg, img03.jpg...img10.jpg, img11.jpg | |
//with no breaks in the sequence. And number_of_image has to be accurate indicating the highest | |
//number. The images folder must be a child folder to the folder that contains the page with this code. | |
var number_of_images = 12; | |
var images_folder = 'slides'; | |
var thisimage = ''; | |
// Creates the thumbnail images inside filmstrip. | |
for (i = 1; i <= number_of_images; i++) { | |
thisimage = images_folder + '/img' + ('0' + i.toString()).slice(-2) + ".jpg"; | |
document.getElementById('slideshow').style.backgroundImage = "url('" + thisimage; + "')"; | |
document.getElementById('filmstrip').innerHTML += "<img src='" + thisimage + "' onclick='show(" + i + ")'>" | |
//Go to first image | |
show(1); | |
} | |
//Calls the show function when a left or right scrolling arrow is clicked. | |
function slide(x) { | |
//Determing the number of the image currently showing (before they clicked a scroll arrow) | |
var currentimage = document.getElementById('slideshow').style.backgroundImage.split('.jpg'); | |
var i = parseInt(currentimage[0].slice(-2)) + x; | |
//If they tried to scroll past the last image, loop around to the first. | |
i = i > number_of_images ? 1 : i; | |
//If they tried to scroll past the first image, loop around to the last. | |
i = i < 1 ? number_of_images : i; | |
show(i); | |
} | |
//Show the image (the i indicates the XX in the imgXX.jpg file name.) | |
function show(i) { | |
thisimage = images_folder + '/img' + ('0' + i.toString()).slice(-2) + ".jpg"; | |
document.getElementById('slideshow').style.backgroundImage = "url('" + thisimage; + "')" | |
//Loop through thumbnail images, border only the current one. | |
var filmstrip = document.getElementById("filmstrip"); | |
var thumbs = filmstrip.getElementsByTagName("img"); | |
for (x = 0; x < thumbs.length; x++) { | |
if (x == i - 1) { | |
thumbs[x].className = 'bordered'; | |
} else { | |
thumbs[x].className = ''; | |
} | |
} | |
//Decide which third of the thumbnails to show based on position of current pic. | |
filmstrip.style.justifyContent = 'center'; | |
if (i <= number_of_images / 3) { | |
filmstrip.style.justifyContent = 'flex-start'; | |
} | |
if (i >= number_of_images - (number_of_images / 3)) { | |
filmstrip.style.justifyContent = 'flex-end'; | |
} | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment