JSFiddle - React, Tailwind, and code Playground

by Valerii Stoliarchuk

HTML

<script src="https://vagebond.nl/wordpress/ambiance-sushi/wp-includes/js/jquery/jquery.js"></script>
<ul id="slideshow"><li>
                    <img src="https://vagebond.nl/wordpress/ambiance-sushi/wp-content/uploads/sites/9/2016/09/1.jpg" alt="slideshow image" />
                </li><li>
                    <img src="https://vagebond.nl/wordpress/ambiance-sushi/wp-content/uploads/sites/9/2016/09/4.jpg" alt="slideshow image" />
                </li><li>
                    <img src="https://vagebond.nl/wordpress/ambiance-sushi/wp-content/uploads/sites/9/2016/09/5.jpg" alt="slideshow image" />
                </li><li>
                    <img src="https://vagebond.nl/wordpress/ambiance-sushi/wp-content/uploads/sites/9/2016/09/8.jpg" alt="slideshow image" />
                </li><li>
                    <img src="https://vagebond.nl/wordpress/ambiance-sushi/wp-content/uploads/sites/9/2016/09/3.jpg" alt="slideshow image" />
                </li><li>
                    <img src="https://vagebond.nl/wordpress/ambiance-sushi/wp-content/uploads/sites/9/2016/09/6.jpg" alt="slideshow image" />
                </li></ul>

CSS

----------------------------------------------- */
#slideshow {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
#slideshow li {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: absolute;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  z-index: 0;
}
#slideshow li.visible {
  /* 15.1: The fade animation */
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 9s;
  animation-duration: 9s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
  }
}
@-moz-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
  }
}
@-o-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
  }
}
#slideshow li img {
  display: none;
}

JavaScript

/**
 * Modify only if you know what you're doing.
 *
 * Dependencies:
 *  - jQuery
 *  - Modernizr
 *  - Page.js
 *
 *  Author: Vagebond
 */

(function ($) {

    $('document').ready(function() {

     slideShow: function() {
            /* fullscreen background slideShow */
            this.slideShow         = $('#slideshow');
            this.slideShowIndex    = 0;

            var _this               = this,
                slidesShowLength    = this.slideShow.length;

            if (slidesShowLength > 0) {

                var items = _this.slideShow.find('li');

                for (var i = 0; i < items.length; i++) {

                    /* Extract images from list items */
                    var item    = $(items[i]),
                        image   = item
                            .find('img')
                            .attr('src');

                    /* Create image array */
                    _this.slideShowImages.push(image);

                    /* Add image to item */
                    item.css({
                        'background-image' : 'url(' + image + ')',
                        'display' : 'none'
                    })
                }

                if (this.slideShowImages.length > 1) {
                    this.showSlide();
                } else {
                    var next = _this.slideShow.find('li:eq(0)');

                    if (next != null) {
                        next.css({
                            'display' : 'block',
                            'opacity' : 1
                        });
                    }
                }
            }
        },

        showSlide: function() {

            /* Show the images */
            var _this               = App,
                next                = _this.slideShow.find('li:eq(' + _this.slideShowIndex + ')'),
                supportsAnimation   = _this.detectCssFeature('animation');

            _this.slideShow
                .children()
               ...