This content originally appeared on DEV Community and was authored by Ramiro
Check out the youtube video for the post ?
What you'll learn:
DOM manipulation:
- Creating elements from javascript
- Editing attributes of the elements in the page
ES6 syntax:
- Arrow functions
- Destructuring assignments
Programming - Higher order function
So the basic idea of making a slideshow using only a function to create the rest is to use createElement function of the document and appending more elements to a single root, and building the slideshow using only javascript.
I like to use two helper function for this:
const el = (id) => document.getElementById(id)
const newEl = (tag) => document.createElement(tag);
One selects elements and the other creates them.
Then we use two function to create sort of react components but this functions will return document elements.
This one is for a single slide of the slideshow
const ImageContiner = (id, src, txt) => {
let ctr = newEl('div')
let img = newEl('img')
let txtSpan = newEl('span')
ctr.id = id;
ctr.classList.add('frame', 'hide')
img.src = src;
img.classList.add('image')
txtSpan.innerText = txt;
txtSpan.classList.add('text')
ctr.append(img)
ctr.append(txtSpan)
return ctr;
}
and this one for the action buttons, here we are using a higher order function just make an example ?
const actionbtn = (txt, action) => {
let btn = newEl('button')
btn.innerText = txt
btn.addEventListener('click', action)
return btn;
}
Now the main one, first we note that we need the id of the root element where we are going to append all the other elements, and the data in form of an array of objects with a src image and a description.
What the function does:
- Selects the root element and appends imageContainer for each item in the data array.
- Creates the previous and next buttons
- Finally it appends the buttons to the actionctr div and then to the root.
const slideshow = (id, data) => {
const root = el(id)
const len = data.length;
let current = 0;
data.forEach((frame, id) => {
({ src, txt } = frame);
let imgCtr = ImageContiner(id, src, txt);
root.append(imgCtr)
});
imgslt = el(current);
imgslt.classList.remove('hide')
// Next and prev btn
let actionctr = newEl('div')
actionctr.classList.add('actionctr')
let prev = actionbtn('?', () => {
if (current === 0) {
imgslt.classList.add('hide')
current = len - 1
imgslt = el(current);
imgslt.classList.remove('hide')
} else {
imgslt.classList.add('hide')
current = current - 1
imgslt = el(current);
imgslt.classList.remove('hide')
}
});
let next = actionbtn('?', () => {
if (current === len - 1) {
imgslt.classList.add('hide')
current = 0
imgslt = el(current);
imgslt.classList.remove('hide')
} else {
imgslt.classList.add('hide')
current = current + 1
imgslt = el(current);
imgslt.classList.remove('hide')
}
});
// let next = actionbtn('next');
actionctr.append(prev, next)
root.append(actionctr)
}
In the HTML is very simple we only need to have a root element and a script tag
...
<body>
<div id="sls">
</div>
<script>
slideshow('sls',
[
{
src: 'https://images.unsplash.com/photo-1585255318859-f5c15f4cffe9?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=500&ixlib=rb-1.2.1&q=80&w=500',
txt: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit. '
},
{
src: 'https://images.unsplash.com/photo-1584226761916-3fd67ab5ac3a?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=500&ixlib=rb-1.2.1&q=80&w=500',
txt: 'Animi voluptatum natus eligendi minima earum ratione eos, fuga voluptas excepturi est.'
},
{
src: 'https://images.unsplash.com/photo-1585179292338-45ba1f62f082?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=500&ixlib=rb-1.2.1&q=80&w=500',
txt: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit. '
},
{
src: 'https://images.unsplash.com/photo-1584753987666-ead137ec0614?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=500&ixlib=rb-1.2.1&q=80&w=500',
txt: 'Animi voluptatum natus eligendi minima earum ratione eos, fuga voluptas excepturi est.'
}
]);
</script>
</body>
...
And last we have the CSS is pretty simple but very important, we don't do nothing crazy here just some positions relative and absolute so the buttons are well positioned in the main div
Also centering stuff you know, with display flex ?
@import url('https://fonts.googleapis.com/css2?family=Baloo+Thambi+2&display=swap');
* {
box-sizing: border-box;
}
body {
margin: 0;
display: flex;
justify-content: center;
}
#sls {
position: relative;
height: 500px;
width: 500px;
}
.hide {
display: none;
}
.frame {
position: absolute;
transition: 500ms all ease;
}
.text {
font-family: 'Baloo Thambi 2', cursive;
position: absolute;
bottom: 0;
left: 0;
background: #535353b5;
width: 100%;
height: 53px;
color: white;
text-align: center;
}
.show {
opacity: 1;
}
.actionctr {
position: absolute;
height: 350px;
top: 73px;
display: flex;
justify-content: space-between;
width: 100%;
}
.actionctr button {
background: #0000;
border: none;
height: 75%;
width: 50px;
}
.actionctr button:hover {
background: rgba(0, 0, 0, 0.25);
}
.actionctr button:active {
background: rgba(0, 0, 0, 0.5);
}
And that's it if you want to connect you can reach to me on twitter @ramgendeploy
This content originally appeared on DEV Community and was authored by Ramiro
Ramiro | Sciencx (2021-09-06T03:26:38+00:00) Learn Javascript by making a Image Slideshow. Retrieved from https://www.scien.cx/2021/09/06/learn-javascript-by-making-a-image-slideshow/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.