JSFiddle - React, Tailwind, and code Playground

by Rania Krourou

HTML

<!DOCTYPE html>
<html>

  <head>
  </head>

  <body>
    <h1>Photography</h1>

  </body>

</html>


<head>

  <body>


    <div id="slideshow">
      <div id="slideshow-wrapper">
        <img src="https://preview.ibb.co/nnmqtU/IMG_4342.jpg" alt="" />
        <img src="https://preview.ibb.co/cURUnp/IMG_4345.jpg" alt="" />
        <img src="https://preview.ibb.co/cVS8f9/IMG_4343.jpg" alt="" />
        <img src="https://preview.ibb.co/c6rC7p/IMG_4346.jpg" alt="" />
        <img src="https://preview.ibb.co/ccEbYU/IMG_4347.jpg" alt="" />
      </div>
      <div id="slideshow-nav"></div>
    </div>

<embed src="http://dw.convertfiles.com/files/0582553001535402629/ips-79b45112-e522-4689-8d45-1bc53fa490c3.mov" allowfullscreen="true" width="305" height="224">

<embed src="https://s27.aconvert.com/convert/p3r68-cdx67/lkq47-w33xq.gif" allowfullscreen="true" width="305" height="224">

CSS

body {
  background-color: lavender;
}

h1 {
  color: white;
  text-align: center;
}

h1 {
  font-family: cursive;
  font-size: 40px;
}

body {
  background-image: url(https://preview.ibb.co/deWCq9/Palm_Pic_ping.jpg);
  background-repeat: no-repeat;
}

#slideshow {
  margin: 2em auto;
  width: 450px;
  overflow: hidden;
}

#slideshow-wrapper {
  height: 290px;
  width: 450px;
}

#slideshow-wrapper img {
  position: absolute;
  width: 500px;
  height: 290px;
  opacity: 0;
  -moz-transition: all 800ms ease-in;
  -webkit-transition: all 800ms ease-in;
  -o-transition: all 800ms ease-in;
  -ms-transition: all 800ms ease-in;
  transition: all 800ms ease-in;
  z-index: 1;
}

#slideshow-wrapper>img:first-child {
  opacity: 1;
  z-index: 2;
}

#slideshow-wrapper .show {
  opacity: 1;
  z-index: 3;
}

#slideshow-wrapper .hide {
  opacity: 0;
  z-index: 1;
}

#slideshow-nav {
  height: 32px;
  margin: 1em 0;
  text-align: center;
}

#slideshow-nav a {
  display: inline-block;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-decoration: none;
  text-align: center;
  color: #000000;
  background: #DFBFBF;
  margin-right: 1em;
}

JavaScript

var Slideshow = {
  Utils: {
    siblings: function(element) {
      var parent = element.parentNode,
        childs = parent.childNodes,
        sibls = [],
        len = childs.length,
        i;
      for (i = 0; i < len; i++) {
        var child = childs[i];
        if (child.nodeType == 1 && child.tagName.toLowerCase() == 'img' && child !== element) {
          sibls.push(child);
        }
      }
      return sibls;
    },
    hideAll: function(elements) {
      var len = elements.length,
        i;
      for (i = 0; i < len; i++) {
        var element = elements[i];
        element.className = 'hide';

      }
    },
    show: function(element) {
      element.className = 'show';
    }
  },
  core: {
    displayNavigation: function() {
      var images = document.getElementById('slideshow-wrapper').getElementsByTagName('img'),
        len = images.length,
        i, nav = document.getElementById('slideshow-nav'),
        html = '';
      for (i = 0; i < len; i++) {
        html += '<a href="#" data-img="' + i + '">' + (i + 1) + '</a>';
      }
      nav.innerHTML = html;
    },
    navigate: function() {
      var links = document.getElementById('slideshow-nav').getElementsByTagName('a'),
        len = links.length,
        i;
      for (i = 0; i < len; i++) {
        var a = links[i];
        a.onclick = function() {
          var $i = this.getAttribute('data-img');
          var img = document.getElementById('slideshow-wrapper').getElementsByTagName('img')[$i];
          Slideshow.Utils.show(img);
          var siblings = Slideshow.Utils.siblings(img);
          Slideshow.Utils.hideAll(siblings);
          return false;
        };
      }
    }
  },
  init: function() {
    for (var prop in this.core) {
      if (typeof this.core[prop] === 'function') {
        this.core[prop]();
      }
    }
  }
};
Slideshow.init();