In this post, we will be learning how to create an image slideshow using only Javascript. We will be covering topics such as DOM manipulation, ES6 syntax, and higher-order functions. By the end of this tutorial, you will have a working image slideshow that you can customize to fit your needs.
Before we begin, check out the following video for a demonstration of the final product:
Don't forget to subscribe to the YT channel ramgendeploy for more tutorials like this.
We will be using two helper functions to create and select elements in the DOM. These functions will be used to create "react-like" components that will create and return document elements.
const el = (id) => document.getElementById(id)
const newEl = (tag) => document.createElement(tag);
The first function is for creating 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;
}
The second function is for creating the action buttons. In this example, we are using a higher-order function to demonstrate its use.
const actionbtn = (txt, action) => {
let btn = newEl('button')
btn.innerText = txt
btn.addEventListener('click', action)
return btn;
}
Now, we will create the main function that will handle the creation of the image slideshow. This function takes the id of the root element and an array of objects containing the source image and a description.
Here's what the function does:
- Selects the root element and appends an 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)
}
The HTML for this project is 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>
...
Lastly, we have the CSS, which is also straightforward. We are using some basic positioning and display flex to center elements and position the buttons correctly.
@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);
}
That's it! You now have a working image slideshow that you can customize to fit your needs. If you have any questions or want to connect, feel free to reach out to me on Twitter @ramgendeploy
Top comments (0)