<div class="container">
  <div class="Wallop gallery" id="gallery">
    <!-- Left Preview Tile  -->
    <div class="Wallop-buttonPrevious gallery__aside">
      <div class="gallery__column">
        <div class="gallery__item" id="leftPreview"></div>
      </div>
    </div>
    <!-- Right Preview Tile  -->
    <div class="Wallop-buttonNext gallery__aside gallery__aside--right">
      <div class="gallery__column">
        <div class="gallery__item" id="rightPreview"></div>
      </div>
    </div>

    <!-- Image Box  -->
    <!-- Include all images here  -->
    <!-- More on the image slider - http://pedroduarte.me/wallop/ -->
    <div class="gallery__column Wallop-list" id="galleryBox">
      <div class="gallery__item Wallop-item" style="background: url('https://static.pexels.com/photos/33109/fall-autumn-red-season.jpg'); background-size: cover;"></div>
      <div class="gallery__item Wallop-item" style="background: url('https://static.pexels.com/photos/39811/pexels-photo-39811.jpeg'); background-size: cover;"></div>
      <div class="gallery__item Wallop-item" style="background: url('https://static.pexels.com/photos/230629/pexels-photo-230629.jpeg'); background-size: cover;"></div>
      <div class="gallery__item Wallop-item" style="background: url('https://static.pexels.com/photos/34950/pexels-photo.jpg'); background-size: cover;"></div>
    </div>
  </div>
</div>

.gallery {
  /*  Let the gallery fill the container */
  height: 100%;
  width: 100%;
  display: flex;
  /* On click fadeOut to black rather than white  */
  background-color: black;
}

.gallery__aside {
  display: flex;
  /*  Fill the available space, */
  /*  but no more than 10% of screen width  */
  flex: 1;
  max-width: 10%;
  
  /*  Styling and transition of side boxes  */
  filter: brightness(.6) saturate(.15);
  transition: filter 0.2s ease-out;
}

.gallery__aside:hover {
  filter: brightness(1) saturate(.6);
  cursor: pointer;
}

/* Move second preview box to the right */
.gallery__aside--right {
  order: 3;
}

/* Make each column flexible (especially vertically) */
.gallery__column {
  flex: 1;
}

.gallery__item {
  /*  Fill the available space (that is 100vh)  */
  height: 100%;
 }

/* Container for the gallery */
/* Could just as well be the whole page */
.container {
  width: 99vw;
  height: 96vh;
}
// Initialize wallop.js image slider
var wallopEl = document.querySelector('.Wallop');
var slider = new Wallop(wallopEl);

// Find preview tiles and main image box
var leftPreview = document.getElementById("leftPreview");
var rightPreview = document.getElementById("rightPreview");
var gallery = document.getElementById("galleryBox");

// Listen for image change on preview tiles click
slider.on('change', onSliderChange);

function onSliderChange(event) {
  // Manually determine index of next and previous picture
  var allImagesArray = slider.allItemsArray;
  var lastImageIndex = slider.allItemsArray.length - 1;
  var previousImageIndex = slider.currentItemIndex - 1 < 0 ? lastImageIndex : slider.currentItemIndex - 1;
  var nextImageIndex = slider.currentItemIndex + 1 > lastImageIndex ? 0 : slider.currentItemIndex + 1;

  // Get the background image property declared within html
  var previousImage = allImagesArray[previousImageIndex].getAttribute("style");
  var nextImage = allImagesArray[nextImageIndex].getAttribute("style");

  // Pass the background image of next and previous image to animate function
  fadeOutIn(leftPreview, previousImage);
  fadeOutIn(rightPreview, nextImage);

}

function fadeOutIn(element, background) {
  // Prepare GSAP TimeLine variable
  var timeline = new TimelineLite();
  
  // First, fade out the current picture
  timeline.to(element, 0.2, {
    opacity: 0.2,
    display: "none",
    // Once the fade out is complete, change background image of both tile boxes
    onComplete: function () {
      element.setAttribute("style", background);
    }

  });

  // Then fade in again
  timeline.to(element, 0.1, {
    opacity: 1,
    display: "block"
  });
}

External CSS

  1. https://cdn.rawgit.com/peduarte/wallop/master/css/wallop.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/wallop/2.4.1/js/Wallop.min.js
  2. //cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js