Creating a JavaScript HTML and CSS Image Carousel
JavaScript Experiment: Carousel images
Part 1
SET UP:
The first thing I am going to do is set up my HTML file, and the CSS that will control the design.
In the head of the html I will include the meta information that will help describe the purpose, and content of the page. The viewport is important not only for mobile design, but accessibility. We want users to be able to scale the page to at least 5 times it's initial size. This way if they need to enlarge font and content to see it, they can.
In the body, we'll define the objects/tags we want to be able to manipulate in both the CSS and in the javascript. The easiest and fastest way to change items in the HTML with JavaScript is with the unique id applied to the item. The DOM can find these, and apply the code to them without much hassle.
For items I will be manipulating in the JavaScript, I add an id, with a snake case. JavaScript can get fussy about hash marks. For classes, or CSS only changes I will use class and a dash in the name. Before I started the writing of this set up, I have drawn out on a piece of paper the basic layout I want.
The html set-up:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=5.0, user-scalable=yes">
<meta name="author" content="Nellie Tobey">
<meta name="description" content="An Experiment to create an image carousel with the drawings from Nellie's 2019 faces.">
<title>Faces 2019</title>
</head>
<body>
<main id="main">
<div id="carousel" class="CarouCells">
<image id="left_img" class="left-img"></image>
<image id="main_img" class="main-img"></image>
<image id="right_img" class="right-img"></image>
</div>
<div id="button_box" class="button-box">
<button id="left_btn" class="carousel-btn"></button>
<button id="play_btn" class="carousel-btn"></button>
<button id="pause_btn" class="carousel-btn"></button>
<button id="right_btn" class="carousel-btn"></button>
</div>
</main>
<footer id="footer">
<h5>© Nellie Tobey 2020</h5>
</footer>
</body>
</html>
--Start Code Block--
body
{
padding: 0;
margin: 0;
}
main {
}
header {
}
#main_head{
}
#head {
}
h1, h2, h3 {
}
h4, h5 {
}
#carousel {
}
.CarouCells {
display: flex;
align-content: center;
justify-content: center;
width: 100vw;
}
#left_img {
}
#main_img {
}
#right_img {
}
.carousel-imgs {
height: 50vh;
width: 30vw;
border: none;
border-radius: 10%;
box-shadow: 0px 0px 5px grey;
}
.button-box {
display: flex;
align-content: center;
justify-content: center;
width: 100vw;
}
#button_box {
}
.carousel-btn {
}
#left_btn {
}
#play_btn {
}
#pause_btn {
}
#right_btn {
}
footer {
}
#footer {
display: flex;
align-content: center;
justify-content: center;
width: 100vw;
border-top: 4px double purple;
border-bottom: 4px double purple;
}
#Author_copyright {
font-size: 1em;
color: black;
}
--End Code Block---
The JavaScript Set-up:
I can't say this is the best way to do it in terms of code practice, but as an experiment, we want to get an understanding of the code, and what we need to do to make it work the way we intend. Code can always be refactored and even completely tossed away in the end. We just want it to run, and do as we intend. From there, it can all be altered and adjusted to the needs of your page.
We'll set up a little test in the JavaScript to make sure all the items we want to change in the DOM are being selected properly by applying something like, "border: 2px solid red;" Where the JavaScript finds and applies these borders to each item we intend to interact with.
The items I intend on interacting with are the carousel images, and the buttons that control what images are shown to the users. I'll set those up first and make sure the file runs properly.
As I started writing the JS tests and DOMs, I realized I was missing some key things to test properly in this way. First, my buttons were very tiny. For design purposes, as well as accessibility I went into the CSS and set each buttons height to 48px, and width to 24%. This is all preliminary, So it can be changed in the future. 48px is the recommended size for buttons. On mobile, if a button is too small, it can be hard to click by touching.
I am going to add a listener event to test that the buttons are set up properly too, so I went in to the CSS and set their sizes, and then into the HTML and gave the buttons the innerHTML that describe them.
Don't forget to link the javascript in the head:
*src = "<your js file's name>"*
<!-- JavaScript -->
<script type="text/javascript" src="carouCell.js"></script>
Once we know all this preliminary stuff is accomplished, we can really start to build.
--Start Code Block---
/* JavaScript source code for project: "Experiment: image Carousel"
* Author: Nellie Tobey
* purpose: Create and document an image carousel for others to use
* Discover how to only use 3 images at a time in the HTML load even when there are a multitude
* For blogpost: <>
* Date: 9-19-2020
*/
// DOM ELEMENTS:
let LEFT_IMG;
let MAIN_IMG;
let RIGHT_IMG;
// buttons:
let LEFT_BTN;
let PLAY_BTN;
let PAUSE_BTN;
let RIGHT_BTN;
// for initial test:
let ALL_ELEMENTS = []
function set_DOM() {
LEFT_IMG = document.getElementById('left_img')
MAIN_IMG = document.getElementById('main_img')
RIGHT_IMG = document.getElementById('right_img')
LEFT_BTN = document.getElementById('left_btn')
PLAY_BTN = document.getElementById('play_btn')
PAUSE_BTN = document.getElementById('pause_btn')
RIGHT_BTN = document.getElementById('right_btn')
//testing list:
ALL_ELEMENTS.push(LEFT_IMG)
ALL_ELEMENTS.push(MAIN_IMG)
ALL_ELEMENTS.push(RIGHT_IMG)
ALL_ELEMENTS.push(LEFT_BTN)
ALL_ELEMENTS.push(PLAY_BTN)
ALL_ELEMENTS.push(PAUSE_BTN)
ALL_ELEMENTS.push(RIGHT_BTN)
}
function testDOM() {
let max = ALL_ELEMENTS.length
//console.log(max)
for (let i = 0; i < max; i++) {
var element = ALL_ELEMENTS[i]
element.style.border = "2px solid red"
};
}
function test_listener() {
let newborder = "3px groove blue"
this.style.border = newborder
}
function BTN_listener() {
LEFT_BTN.addEventListener('click', test_listener)
PLAY_BTN.addEventListener('click', test_listener)
PAUSE_BTN.addEventListener('click', test_listener)
RIGHT_BTN.addEventListener('click', test_listener)
}
window.addEventListener('load', (event) => {
set_DOM()
testDOM()
BTN_listener()
}
)
--End Code Block--
When this is all set up, the items we are going to change should all load with that red border. The buttons we wish to do something when we click on them should change on click, and have a blue border instead of red.
Part two will take these three files, and apply the images, and buttons will control the scrolling and play/pause of the carousel. Another piece of the set up:
I have 20 files that are jpgs. Snapshots of the faces project I did in 2019 where I drew peoples faces with ink and pencil. When I saved them into the images folder I will be using, I renamed them all to 'faces' + an incremented number from 0 - 22.
Purpose:
Now in a for loop, I can grab the files src with it's name easily, by saying src = 'faces' + i + '.jpg'. No need for each file to have a specific name.
But that's for the next post.
Play with the code, break it, manipulate it, burn it to the ground.
Happy coding!
Comments
Post a Comment