JavaScript Slideshow
Let's make a slide show
The html
<html>
, <head>
& <body>
elements
First we are going to start off with our html document. This tells the browser where to start reading html, although it will still read anything you put inside of a file with a .html extention it's best practice to do this
<html>
</html>
Then we are going to add a <head>
and a body
tag within our html tags.
Elements within the <head>
tag are not rendered to the user. The <head>
tag is where we are going to link our css and javascript files so we still need it. Elements within the <body>
tag are rendered to the user
<html>
<head>
<!-- Links and stuff not rendered to the user -->
</head>
<body>
<!-- Where our content will be rendered to the user -->
</body>
</html>
Add a <div>
element with the class container
within the <body>
body elements. The class
key word is an html attribute.
<body>
<div class="container">
</body>
But what is an HTML attribute?
- Attributes add functionality to HTML elments. All HTML elements can have attributes
- The href attribute of
<a>
specifies the URL of the page the link goes to - The src attribute of
<img>
specifies the path to the image to be displayed - The width and height attributes of
<img>
provide size information for images - The alt attribute of
<img>
provides an alternate text for an image - The style attribute is used to add styles to an element, such as color, font, size, and more
- The lang attribute of the
<html>
tag declares the language of the Web page - The title attribute defines some extra information about an element
- The href attribute of
So what does the <div>
element do and how does the class="container"
attribute effect it?
<div>
is an arbitrary element that is used to define divisions in the sections of an HTML document, The resson we add the class="container"
attribute to it is so we can later access that element and its nested contents when modifying the document with CSS and javascript.
Adding the large images
Make sure to close the <div class="containter">
element with a closing </div>
tag. Then add another <div>
element with the class
mySlides
.
<div class="mySlides">
</div>
Within this div we are going to add another div with the class numbertext
and close it on the same line
<div class="mySlides">
<div class="numbertext"> </div>
</div>
Then under that div we are going to add an <img>
element which will render our image to the user. It needs two attributes.
- The src
attribute will be the filepath to the image we want to display
- The style
attribute allows for inline CSS (Cascading Style Sheets) in this case the css makes sure the rendered image takes up 100% of the users screen.
<div class="mySlides">
<div class="numbertext"></div>
<img src="imgs/img_woods_wide.jpg" style="width:100%">
</div>
Do this for each file in the imgs
directory ending with the word wide
. Can anyone guess why we need two seprate image sizes?
https://github.com/RaiderHacks/10-20/blob/master/notes.assets/image-20201019160812543.png
Adding thumbnail images
The process for adding the the thumbnails to our image carrosell is similar to what we did with the bigger images except:
- This time we are wrapping all of the elements in a div with a class
row
and each nested div is going to have a class ofcolumn
<div class="row">
<div class="column">
<!-- where are img element will go -->
</div>
</div>
- This time the
<img>
element will have three new attributesclass
with the value ofdemo cursor
alt
with a value that will describe what is in the imageonclick
with the value ofcurrentSlide(1-6)
It will look like this:
<div class="column">
<img class="demo cursor" src="imgs/img_woods.jpg" style="width:100%" onclick="currentSlide(1)" alt="The Woods">
</div>
<div class="column">
<img class="demo cursor" src="imgs/img_city.jpg" style="width:100%" onclick="currentSlide(2)" alt="Cinque Terre">
</div>
<div class="column">
<img class="demo cursor" src="imgs/img_mountains.jpg" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
After that add this snippet
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<!-- Image text -->
<div class="caption-container">
<p id="caption"></p>
</div>
So what does the onclick
attribute do?
similar to the way the style
tag allows you to use CSS, the onclick
attributes triggers javascript code.
To try this out by throwing the following snippet into an html file and open it on your desktop
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
</style>
</head>
<body>
<p>What ever you do, DO NOT CLICK THIS BUTTON!!!!</p>
<button onclick="myFunction()">DO NOT CLICK ME</button>
<script>
function myFunction() {
var x = document.createElement("P");
var t = document.createTextNode("STOP");
x.appendChild(t);
document.body.appendChild(x);
}
</script>
</body>
</html>
Notice how we didn't have to spin up a web-server to do that?
Now what we have onclick
doing on our index.html
image is a little bit more complicated, but it won't even work if we don't link our Javascript. Remember that <head>
tag? Add the two following lines to it.
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
Now write two more files to your project directory one named script.js
and the other style.css
. This is what our project directory should look like after this.
├── imgs
│ ├── img_city.jpg
│ ├── img_city_wide.jpg
│ ├── img_lights.jpg
│ ├── img_lights_wide.jpg
│ ├── img_mountains.jpg
│ ├── img_mountains_wide.jpg
│ ├── img_nature.jpg
│ ├── img_nature_wide.jpg
│ ├── img_snow.jpg
│ ├── img_snow_wide.jpg
│ ├── img_woods.jpg
│ └── img_woods_wide.jpg
├── index.html
├── script.js
└── style.css
The Javascript
Open up script.js
and paste the following code into it
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
For the sake of time and because Javascript isn't in the scope of this lesson lets focus on line 10 the currentSlide()
function. We have 6 different <img>
elements that act as buttons in our index.html
file. Each image element when clicked calls the currentSlide()
function with an argument n
(We hardcoded n
with a value of one through six). The function then passes the value of n
to the showSlides
function which triggers some spaghetti code that that changes the css display value all of our our <div class="mySlides">
to "display: none;"
meaning they are hidden from the user. It then uses n
to find the slide that the user selected and changes its css value to display: block;
meaning it will live on its own line allowing it to be fully visible to the user.
The CSS
Paste the following into style.css
* {
box-sizing: border-box;
}
/* Position the image container (needed to position the left and right arrows) */
.container {
position: relative;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Add a pointer when hovering over the thumbnail images */
.cursor {
cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 40%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* Container for image text */
.caption-container {
text-align: center;
background-color: #222;
padding: 2px 16px;
color: white;
}
.row:after {
content: "";
display: table;
clear: both;
}
/* Six columns side by side */
.column {
float: left;
width: 16.66%;
}
/* Add a transparency effect for thumnbail images */
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
The CSS syntax is pretty goofy but it mostly consists of a selector, property and value.
If this didn't work for you check out the real source code here
https://www.w3schools.com/howto/howto_js_slideshow_gallery.asp