DEV Community

Cover image for Learn Javascript by making an Image Slideshow
Ramiro - Ramgen
Ramiro - Ramgen

Posted on • Updated on

Learn Javascript by making an Image Slideshow

Check out the youtube video for the post 😊

If you like follow for more and consider subscribing to the YT channel ramgendeploy 😁

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);
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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:

  1. Selects the root element and appends imageContainer for each item in the data array.
  2. Creates the previous and next buttons
  3. 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)
}

Enter fullscreen mode Exit fullscreen mode

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>
...
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

And that's it if you want to connect you can reach to me on twitter @ramgendeploy

Discussion (0)