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:


--- Start Code block--
 
<!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>&#169 Nellie Tobey 2020</h5> </footer> </body> </html>
---End Code block--


The css set-up:

After writing up the HTML, I will start a CSS file, and put all components in it. Some will only be addressed by the JavaScript, but including all of them means when we go into the web dev tools to change any design issues, the browser can easily show us it's classes and effecting element names from the CSS file.  The override in the design goes class < id   and if there are multiple class's attached to an item, the overrides are read in order.   A class attribute could have three components and the last one will override all those before it.  So if you start with a class that has a background color of black, but the final class has a background of pink, pink will be the one applied in the final render. 

We can change these as we go to make it more eye appealing. Anything I know I want centered, I can apply that now, and change it in the future. 
The reason to set all this up in advance, before touching the JavaScript is so that the html file can be run locally and we can see what the JavaScript is doing once the browser has interpreted our code. 
If the initial set up is wrong, a missing tag, or conflicting unique id's exist, our JavaScript won't be able to run properly.  

Once this is set up in a folder, navigate to it, and click on that HTML file to have the browser run it.
If you need to, go ahead and give it some flare and design now, but that can all be done after the JavaScript code is written.  That bit is up to you.  

Don't forget it can't apply the CSS if the file is not linked in the head.  

Add this to HTML head with the name of your CSS file: 

 <!-- Style Sheet -->
    <link rel="stylesheet" href="carouCell.css" />

Since this is run local, and I keep everything in the same folder, paths are not needed. It will look in the same folder the HTML resides in.  href is going to be the name of your CSS file. 
When this goes into an app that you wish to run live, the href will need to be changed to the proper pathway for the browser to find it. 




--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

Popular posts from this blog

JavaScript Ascii animation with while loops and console.log

playing with trigonometry sin in pygame

JavaScript and a Matrix