Как я могу автоматически анимировать уже структурированную галерею изображений?

Question

У меня есть адаптивный дизайн, уже структурированный только в HTML5 / CSS3, с учетом учебного пособия, которое я наблюдал на YouTube, но в видео оно было только упаковано, я скучаю по важной вещи, которую я посвятил поиску, но я не нашел второй часть или другое видео, которое объясняет или является справочным. В то же время просмотрите каждый учебник на канале, но безуспешно. : /

Это полный код, адаптированный для любого мобильного устройства и компьютера.

img {
  max-width: 100%;
}

#app {
  width: 90%;
  height: 85%;
  overflow: hidden;
}

.ui-big-images {
  position: absolute;
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: -webkit-box;
  display: flex;
}

.ui-big-image {
  width: 100%;
  margin-right: -100%;
}

.ui-big-image img {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center 20%;
  object-position: center 20%;
  width: 100%;
  height: 100%;
  display: block;
}

.ui-thumbnails {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  background-color: #fff;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -webkit-box-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  align-items: center;
  padding: 0 1rem;
  padding-top: .5rem;
  padding-right: 45%;
  padding-right: calc( 45% + .5rem);
}

.ui-thumbnail {
  display: block;
  margin-right: .5rem;
  padding: .5rem 0;
  cursor: pointer;
}

.ui-cuticle {
  background-color: #D4A12D;
  position: absolute;
  bottom: 0;
  height: .25rem;
  width: 100%;
}

.ui-thumbnail>img {
  width: auto;
}

.ui-content {
  position: absolute;
  width: 40%;
  right: 5%;
  bottom: 0;
}

.ui-articles {
  background: #493e56;
  color: white;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: stretch;
  align-items: stretch;
  overflow: hidden;
}

.ui-article {
  padding: 1.5rem;
  width: 100%;
  margin-right: -100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-pack: center;
  justify-content: center;
}

.ui-paragraph {
  margin: 0;
  font-size: .7rem;
  line-height: 1.7;
}

.ui-nav {
  position: absolute;
  right: 0;
  bottom: 100%;
  background: inherit;
}

.ui-nav button {
  background: #493e56;
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: .5em;
  width: 2em;
  color: #FFF;
  font-family: monospace;
  -webkit-transition: inherit;
  transition: inherit;
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
}

.ui-nav button:hover,
.ui-nav button:focus {
  background: #D4A12D;
  outline: none;
}

.ui-nav button:active {
  outline: none;
  -webkit-transform: translateY(0.25em);
  transform: translateY(0.25em);
  -webkit-transition-duration: 100ms;
  transition-duration: 100ms;
}

.ui-heading {
  margin: 0;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: normal;
}

.ui-heading:before {
  content: 'Animator';
  font-size: .5rem;
  text-transform: uppercase;
  display: block;
  margin-bottom: .5rem;
  letter-spacing: 1px;
}


/* ---------------------------------- */

.ui-big-image {
  opacity: 0;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.ui-big-image img {
  -webkit-transform: scale(0.85);
  transform: scale(0.85);
}

.ui-big-image[data-active]~.ui-big-image {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.ui-big-image[data-active] {
  opacity: 1;
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}

.ui-big-image[data-active] img {
  -webkit-transform: scale(1);
  transform: scale(1);
}


/* ---------------------------------- */

.ui-article {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.ui-article:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #D4A12D;
  opacity: 1;
  -webkit-transition-duration: 0.35s;
  transition-duration: 0.35s;
  z-index: 1;
}

.ui-article[data-active]~.ui-article {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.ui-article[data-active] {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}

.ui-article[data-active]:before {
  opacity: 0;
}


/* ---------------------------------- */

.ui-thumbnail>img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  -webkit-transition-duration: 0.35s;
  transition-duration: 0.35s;
}

.ui-thumbnail:active>img {
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
  -webkit-transition-duration: 100ms;
  transition-duration: 100ms;
}

.ui-thumbnail:focus {
  outline: none;
}

.ui-cuticle {
  display: none;
}

.ui-thumbnail[data-active]>img,
.ui-thumbnail:hover>img {
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
}

.ui-thumbnail[data-active] .ui-cuticle {
  display: block;
}


/* ---------------------------------- */

body {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  background-color: #1A130C;
}

*,
*:before,
*:after {
  box-sizing: border-box;
  position: relative;
  -webkit-transition-property: opacity, -webkit-transform, -webkit-filter;
  transition-property: opacity, -webkit-transform, -webkit-filter;
  transition-property: transform, opacity, filter;
  transition-property: transform, opacity, filter, -webkit-transform, -webkit-filter;
  -webkit-transition-duration: 0.7s, 0.7s, 0.7s;
  transition-duration: 0.7s, 0.7s, 0.7s;
  -webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
  transition-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
}

body,
html {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

<div id="app" data-state="0">
  <div class="ui-big-images">
    <div class="ui-big-image" data-key="0">
      <img src="https://picsum.photos/1200/1200/?image=1005" alt="" />
    </div>
    <div class="ui-big-image" data-key="1">
      <img src="https://picsum.photos/1200/1200/?image=804" alt="" />
    </div>
    <div class="ui-big-image" data-key="2">
      <img src="https://picsum.photos/1200/1200/?image=838" alt="" />
    </div>
    <div class="ui-big-image" data-key="3">
      <img src="https://picsum.photos/1200/1200/?image=832" alt="" />
    </div>
    <div class="ui-big-image" data-key="4">
      <img src="https://picsum.photos/1200/1200/?image=836" alt="" />
    </div>
    <div class="ui-big-image" data-key="5">
      <img src="https://picsum.photos/1200/1200/?image=823" alt="" />
    </div>
  </div>
  <div class="ui-thumbnails">
    <div class="ui-thumbnail" tabindex="-1" data-key="0">
      <img src="https://picsum.photos/1200/1200/?image=1005" alt="" />
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
    <div class="ui-thumbnail" tabindex="-1" data-key="1">
      <img src="https://picsum.photos/1200/1200/?image=804" alt="" />
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
    <div class="ui-thumbnail" tabindex="-1" data-key="2">
      <img src="https://picsum.photos/1200/1200/?image=838" alt="" />
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
    <div class="ui-thumbnail" tabindex="-1" data-key="3">
      <img src="https://picsum.photos/1200/1200/?image=832" alt="" />
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
    <div class="ui-thumbnail" tabindex="-1" data-key="4">
      <img src="https://picsum.photos/1200/1200/?image=836" alt="" />
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
    <div class="ui-thumbnail" tabindex="-1" data-key="5">
      <img src="https://picsum.photos/1200/1200/?image=823" alt="" />
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
  </div>
  <div class="ui-content">

    <nav class="ui-nav">
      <button id="prev" tabindex="-1" title="Previous">&lt;</button>
      <button id="next" tabindex="-1" title="Next">&gt;</button>
    </nav>

    <div class="ui-articles">
      <article class="ui-article" data-key="0">
        <h2 class="ui-heading">Stephen Shaw</h2>
        <p class="ui-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae cupiditate assumenda nemo delectus totam atque quas suscipit dicta.</p>
      </article>
      <article class="ui-article" data-key="1">
        <h2 class="ui-heading">David Khourshid</h2>
        <p class="ui-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod sapiente soluta iusto molestias ullam. </p>
      </article>
      <article class="ui-article" data-key="2">
        <h2 class="ui-heading">Coding Compadre</h2>
        <p class="ui-paragraph">Lorem ipsum dolor sit, amet consectetur adipisicing elit. </p>
      </article>
      <article class="ui-article" data-key="3">
        <h2 class="ui-heading">Boolean Buddy</h2>
        <p class="ui-paragraph">Lorem ipsum dolor sit amet consectetur, adipisicing elit. </p>
      </article>
      <article class="ui-article" data-key="4">
        <h2 class="ui-heading">Animation Amigo</h2>
        <p class="ui-paragraph">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestias exercitationem voluptatibus</p>
      </article>
      <article class="ui-article" data-key="5">
        <h2 class="ui-heading">Keyframe Companion</h2>
        <p class="ui-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae soluta reprehenderit, ut doloribus corrupti</p>
      </article>
    </div>
  </div>
</div>

Как я могу анимировать галерею, используя jQuery простым способом, как показано на этом рисунке:

Можете ли вы объяснить мне, как это сделать, чтобы оживить эту уже структурированную галерею.

Answer 1

Существует много способов достижения этого результата с использованием чистого JavaScript или jQuery.

. При просмотре разметки HTML атрибут data-key указывает на текущее изображение, которое будет отображается в галерее, указывая на связь между элементами с классом ui-big-image, ui-thumbnail или ui-article.

В случае элементов с классом ui-big-image они имеют объявление CSS, которое делает они скрыты по следующему правилу:

.ui-big-image {
  opacity: 0;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

Эти элементы видны через оператор CSS:

.ui-big-image[data-active] {
  opacity: 1;
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}

В случае элементы с классом ui-article имеют объявление CSS, которое скрывает их по следующему правилу:

.ui-article {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

Затем с помощью правила .ui-article[data-active] CSS я инвертирую стили, чтобы сделать их видимыми или невидимым в зависимости от ситуации.

.ui-article[data-active] {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
}

Объявление CSS ui-article:before добавляет пустой раздел, чтобы скрыть описание изображения. С помощью правила .ui-article[data-active]:before CSS мы делаем его доступным визуально.

Затем необходимо назначить события миниатюрам, предыдущему и следующему кнопки, чтобы поменять атрибут data-active в элементах классов, упомянутых выше, чтобы сделать их видимыми или невидимыми. Для миниатюр у меня есть эта функция:

function setThumbnailAction() {
  var uiThumbnailElements = document.getElementsByClassName("ui-thumbnail");
  var i, len = uiThumbnailElements.length, thumbnail;

  itemsInGallery = len - 1;

  for (i = 0; i < len; i++) {
    thumbnail = uiThumbnailElements[i];
    thumbnail.onclick = function() {
      key = this.dataset.key;
      showImage();
    }
  }
}

В предыдущем коде мы получаем key элементов с классом ui-thumbnail и сохраняем его в глобальной переменной key. Затем мы вызываем функцию showImage().

Функция showImage() отвечает за установку атрибута data-active со значением по умолчанию true для элементов с CSS class ui-big-image, ui-article и ui-thumbnail, используя значение key через этот селектор div.ui-big-image[data-key=\"" + key + "\"]. В начале мы всегда удаляем атрибут data-active с помощью функции restoreGallery().

function showImage() {
    restoreGallery("ui-big-image");
    restoreGallery("ui-article");
    restoreGallery("ui-thumbnail");
    var image = document.querySelector("div.ui-big-image[data-key=\"" + key + "\"]");
    image.dataset.active = "true";

    var article = document.querySelector("article.ui-article[data-key=\"" + key + "\"]");
    article.dataset.active = "true";

    var uiThumbnail = document.querySelector("div.ui-thumbnail[data-key=\"" + key + "\"]");
    uiThumbnail.dataset.active = "true";
}

Вы можете увидеть в действии следующие примеры:

С чистым JavaScript:

(function() {

  var itemsInGallery = 0, key = 0;

  function setThumbnailAction() {
    var uiThumbnailElements = document.getElementsByClassName("ui-thumbnail"), i, len = uiThumbnailElements.length, thumbnail;
    itemsInGallery = len - 1;

    for (i = 0; i < len; i++) {
      thumbnail = uiThumbnailElements[i];
      thumbnail.onclick = function() {
        key = this.dataset.key;
        showImage();
      }
    }
  }

  function showImage() {
    restoreGallery("ui-big-image");
    restoreGallery("ui-article");
    restoreGallery("ui-thumbnail");
    var image = document.querySelector("div.ui-big-image[data-key=\"" + key + "\"]");
    image.dataset.active = "true";

    var article = document.querySelector("article.ui-article[data-key=\"" + key + "\"]");
    article.dataset.active = "true";

    var uiThumbnail = document.querySelector("div.ui-thumbnail[data-key=\"" + key + "\"]");
    uiThumbnail.dataset.active = "true";
  }

  function restoreGallery(className) {
    var items = document.getElementsByClassName(className), i, len = items.length, item;

    for (i = 0; i < len; i++) {
      item = items[i];
      item.removeAttribute("data-active");
    }
  }

  function setPrevNextAction() {
    var prev = document.getElementById("prev"), next = document.getElementById("next");

    prev.onclick = function() {
      key--;
      key = key < 0 ? 0 : key;
      showImage();
    };
    next.onclick = function() {
      key++;
      key = key > itemsInGallery ? itemsInGallery : key;
      showImage();
    };
  }

  setThumbnailAction();
  setPrevNextAction();
  showImage();

  var timeInSeconds = 5;
  setInterval(function() {
    key++;
    key = key > itemsInGallery ? 0 : key;
    showImage();
  }, timeInSeconds * 1000);
}());

img {
  max-width: 100%;
}

#app {
  width: 90%;
  height: 85%;
  overflow: hidden;
}

.ui-big-images {
  position: absolute;
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: -webkit-box;
  display: flex;
}

.ui-big-image {
  width: 100%;
  margin-right: -100%;
}

.ui-big-image img {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center 20%;
  object-position: center 20%;
  width: 100%;
  height: 100%;
  display: block;
}

.ui-thumbnails {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  background-color: #fff;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -webkit-box-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  align-items: center;
  padding: 0 1rem;
  padding-top: .5rem;
  padding-right: 45%;
  padding-right: calc( 45% + .5rem);
}

.ui-thumbnail {
  display: block;
  margin-right: .5rem;
  padding: .5rem 0;
  cursor: pointer;
}

.ui-cuticle {
  background-color: #D4A12D;
  position: absolute;
  bottom: 0;
  height: .25rem;
  width: 100%;
}

.ui-thumbnail>img {
  width: auto;
}

.ui-content {
  position: absolute;
  width: 40%;
  right: 5%;
  bottom: 0;
}

.ui-articles {
  background: #493e56;
  color: white;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: stretch;
  align-items: stretch;
  overflow: hidden;
}

.ui-article {
  padding: 1.5rem;
  width: 100%;
  margin-right: -100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-pack: center;
  justify-content: center;
}

.ui-paragraph {
  margin: 0;
  font-size: .7rem;
  line-height: 1.7;
}

.ui-nav {
  position: absolute;
  right: 0;
  bottom: 100%;
  background: inherit;
}

.ui-nav button {
  background: #493e56;
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: .5em;
  width: 2em;
  color: #FFF;
  font-family: monospace;
  -webkit-transition: inherit;
  transition: inherit;
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
}

.ui-nav button:hover,
.ui-nav button:focus {
  background: #D4A12D;
  outline: none;
}

.ui-nav button:active {
  outline: none;
  -webkit-transform: translateY(0.25em);
  transform: translateY(0.25em);
  -webkit-transition-duration: 100ms;
  transition-duration: 100ms;
}

.ui-heading {
  margin: 0;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: normal;
}

.ui-heading:before {
  content: 'Animator';
  font-size: .5rem;
  text-transform: uppercase;
  display: block;
  margin-bottom: .5rem;
  letter-spacing: 1px;
}


/* --- */

.ui-big-image {
  opacity: 0;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.ui-big-image img {
  -webkit-transform: scale(0.85);
  transform: scale(0.85);
}

.ui-big-image[data-active]~.ui-big-image {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.ui-big-image[data-active] {
  opacity: 1;
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}

.ui-big-image[data-active] img {
  -webkit-transform: scale(1);
  transform: scale(1);
}


/* --- */

.ui-article {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.ui-article:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #D4A12D;
  opacity: 1;
  -webkit-transition-duration: 0.35s;
  transition-duration: 0.35s;
  z-index: 1;
}

.ui-article[data-active]~.ui-article {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.ui-article[data-active] {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}

.ui-article[data-active]:before {
  opacity: 0;
}


/* --- */

.ui-thumbnail>img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  -webkit-transition-duration: 0.35s;
  transition-duration: 0.35s;
}

.ui-thumbnail:active>img {
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
  -webkit-transition-duration: 100ms;
  transition-duration: 100ms;
}

.ui-thumbnail:focus {
  outline: none;
}

.ui-cuticle {
  display: none;
}

.ui-thumbnail[data-active]>img,
.ui-thumbnail:hover>img {
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
}

.ui-thumbnail[data-active] .ui-cuticle {
  display: block;
}


/* --- */

body {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  background-color: #1A130C;
}

*,
*:before,
*:after {
  box-sizing: border-box;
  position: relative;
  -webkit-transition-property: opacity, -webkit-transform, -webkit-filter;
  transition-property: opacity, -webkit-transform, -webkit-filter;
  transition-property: transform, opacity, filter;
  transition-property: transform, opacity, filter, -webkit-transform, -webkit-filter;
  -webkit-transition-duration: 0.7s, 0.7s, 0.7s;
  transition-duration: 0.7s, 0.7s, 0.7s;
  -webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
  transition-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
}

body,
html {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

<div id="app" data-state="0">
  <div class="ui-big-images">
    <div class="ui-big-image" data-key="0">
      <img src="https://picsum.photos/1200/1200/?image=1005" alt="" />
    </div>
    <div class="ui-big-image" data-key="1">
      <img src="https://picsum.photos/1200/1200/?image=804" alt="" />
    </div>
    <div class="ui-big-image" data-key="2">
      <img src="https://picsum.photos/1200/1200/?image=838" alt="" />
    </div>
    <div class="ui-big-image" data-key="3">
      <img src="https://picsum.photos/1200/1200/?image=832" alt="" />
    </div>
    <div class="ui-big-image" data-key="4">
      <img src="https://picsum.photos/1200/1200/?image=836" alt="" />
    </div>
    <div class="ui-big-image" data-key="5">
      <img src="https://picsum.photos/1200/1200/?image=823" alt="" />
    </div>
  </div>
  <div class="ui-thumbnails">
    <div class="ui-thumbnail" tabindex="-1" data-key="0">
      <img src="https://picsum.photos/1200/1200/?image=1005" alt="" />
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
    <div class="ui-thumbnail" tabindex="-1" data-key="1">
      <img src="https://picsum.photos/1200/1200/?image=804" alt="" />
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
    <div class="ui-thumbnail" tabindex="-1" data-key="2">
      <img src="https://picsum.photos/1200/1200/?image=838" alt="" />
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
    <div class="ui-thumbnail" tabindex="-1" data-key="3">
      <img src="https://picsum.photos/1200/1200/?image=832" alt="" />
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
    <div class="ui-thumbnail" tabindex="-1" data-key="4">
      <img src="https://picsum.photos/1200/1200/?image=836" alt="" />
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
    <div class="ui-thumbnail" tabindex="-1" data-key="5">
      <img src="https://picsum.photos/1200/1200/?image=823" alt="" />
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
  </div>
  <div class="ui-content">

    <nav class="ui-nav">
      <button id="prev" tabindex="-1" title="Previous">&lt;</button>
      <button id="next" tabindex="-1" title="Next">&gt;</button>
    </nav>

    <div class="ui-articles">
      <article class="ui-article" data-key="0">
        <h2 class="ui-heading">Stephen Shaw</h2>
        <p class="ui-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae cupiditate assumenda nemo delectus totam atque quas suscipit dicta.</p>
      </article>
      <article class="ui-article" data-key="1">
        <h2 class="ui-heading">David Khourshid</h2>
        <p class="ui-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod sapiente soluta iusto molestias ullam. </p>
      </article>
      <article class="ui-article" data-key="2">
        <h2 class="ui-heading">Coding Compadre</h2>
        <p class="ui-paragraph">Lorem ipsum dolor sit, amet consectetur adipisicing elit. </p>
      </article>
      <article class="ui-article" data-key="3">
        <h2 class="ui-heading">Boolean Buddy</h2>
        <p class="ui-paragraph">Lorem ipsum dolor sit amet consectetur, adipisicing elit. </p>
      </article>
      <article class="ui-article" data-key="4">
        <h2 class="ui-heading">Animation Amigo</h2>
        <p class="ui-paragraph">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestias exercitationem voluptatibus</p>
      </article>
      <article class="ui-article" data-key="5">
        <h2 class="ui-heading">Keyframe Companion</h2>
        <p class="ui-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae soluta reprehenderit, ut doloribus corrupti</p>
      </article>
    </div>
  </div>
</div>

С jQuery:

$(function() {

  var itemsInGallery = 0, key = 0;

  function setThumbnailAction() {

    var uiThumbnailElements = $(".ui-thumbnail");
    itemsInGallery = uiThumbnailElements.length - 1;

    uiThumbnailElements.on("click", function() {
      key = $(this).data("key");
      showImage();
    });
  }

  function showImage() {
    restoreGallery("ui-big-image");
    restoreGallery("ui-article");
    restoreGallery("ui-thumbnail");

    var image = $("div.ui-big-image[data-key=\"" + key + "\"]");
    image.attr("data-active", "true");

    var article = $("article.ui-article[data-key=\"" + key + "\"]");
    article.attr("data-active", "true");

    var uiThumbnail = $("div.ui-thumbnail[data-key=\"" + key + "\"]");
    uiThumbnail.attr("data-active", "true");
  }

  function restoreGallery(className) {
    $("." + className).removeAttr("data-active");
  }

  function setPrevNextAction() {
    var prev = $("#prev"), next = $("#next");

    prev.on("click", function() {
      key--;
      key = key < 0 ? 0 : key;
      showImage();
    });
    next.on("click", function() {
      key++;
      key = key > itemsInGallery ? itemsInGallery : key;
      showImage();
    });
  }

  setThumbnailAction();
  setPrevNextAction();
  showImage();

  var timeInSeconds = 5;
  setInterval(function() {
    key++;
    key = key > itemsInGallery ? 0 : key;
    showImage();
  }, timeInSeconds * 1000);
}());

img {
  max-width: 100%;
}

#app {
  width: 90%;
  height: 85%;
  overflow: hidden;
}

.ui-big-images {
  position: absolute;
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: -webkit-box;
  display: flex;
}

.ui-big-image {
  width: 100%;
  margin-right: -100%;
}

.ui-big-image img {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center 20%;
  object-position: center 20%;
  width: 100%;
  height: 100%;
  display: block;
}

.ui-thumbnails {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  background-color: #fff;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -webkit-box-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  align-items: center;
  padding: 0 1rem;
  padding-top: .5rem;
  padding-right: 45%;
  padding-right: calc( 45% + .5rem);
}

.ui-thumbnail {
  display: block;
  margin-right: .5rem;
  padding: .5rem 0;
  cursor: pointer;
}

.ui-cuticle {
  background-color: #D4A12D;
  position: absolute;
  bottom: 0;
  height: .25rem;
  width: 100%;
}

.ui-thumbnail>img {
  width: auto;
}

.ui-content {
  position: absolute;
  width: 40%;
  right: 5%;
  bottom: 0;
}

.ui-articles {
  background: #493e56;
  color: white;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: stretch;
  align-items: stretch;
  overflow: hidden;
}

.ui-article {
  padding: 1.5rem;
  width: 100%;
  margin-right: -100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-pack: center;
  justify-content: center;
}

.ui-paragraph {
  margin: 0;
  font-size: .7rem;
  line-height: 1.7;
}

.ui-nav {
  position: absolute;
  right: 0;
  bottom: 100%;
  background: inherit;
}

.ui-nav button {
  background: #493e56;
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: .5em;
  width: 2em;
  color: #FFF;
  font-family: monospace;
  -webkit-transition: inherit;
  transition: inherit;
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
}

.ui-nav button:hover,
.ui-nav button:focus {
  background: #D4A12D;
  outline: none;
}

.ui-nav button:active {
  outline: none;
  -webkit-transform: translateY(0.25em);
  transform: translateY(0.25em);
  -webkit-transition-duration: 100ms;
  transition-duration: 100ms;
}

.ui-heading {
  margin: 0;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: normal;
}

.ui-heading:before {
  content: 'Animator';
  font-size: .5rem;
  text-transform: uppercase;
  display: block;
  margin-bottom: .5rem;
  letter-spacing: 1px;
}


/* --- */

.ui-big-image {
  opacity: 0;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.ui-big-image img {
  -webkit-transform: scale(0.85);
  transform: scale(0.85);
}

.ui-big-image[data-active]~.ui-big-image {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.ui-big-image[data-active] {
  opacity: 1;
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}

.ui-big-image[data-active] img {
  -webkit-transform: scale(1);
  transform: scale(1);
}


/* --- */

.ui-article {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.ui-article:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #D4A12D;
  opacity: 1;
  -webkit-transition-duration: 0.35s;
  transition-duration: 0.35s;
  z-index: 1;
}

.ui-article[data-active]~.ui-article {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.ui-article[data-active] {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}

.ui-article[data-active]:before {
  opacity: 0;
}


/* --- */

.ui-thumbnail>img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  -webkit-transition-duration: 0.35s;
  transition-duration: 0.35s;
}

.ui-thumbnail:active>img {
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
  -webkit-transition-duration: 100ms;
  transition-duration: 100ms;
}

.ui-thumbnail:focus {
  outline: none;
}

.ui-cuticle {
  display: none;
}

.ui-thumbnail[data-active]>img,
.ui-thumbnail:hover>img {
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
}

.ui-thumbnail[data-active] .ui-cuticle {
  display: block;
}


/* --- */

body {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  background-color: #1A130C;
}

*,
*:before,
*:after {
  box-sizing: border-box;
  position: relative;
  -webkit-transition-property: opacity, -webkit-transform, -webkit-filter;
  transition-property: opacity, -webkit-transform, -webkit-filter;
  transition-property: transform, opacity, filter;
  transition-property: transform, opacity, filter, -webkit-transform, -webkit-filter;
  -webkit-transition-duration: 0.7s, 0.7s, 0.7s;
  transition-duration: 0.7s, 0.7s, 0.7s;
  -webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
  transition-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
}

body,
html {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="app" data-state="0">
  <div class="ui-big-images">
    <div class="ui-big-image" data-key="0">
      <img src="https://picsum.photos/1200/1200/?image=1005" alt="" />
    </div>
    <div class="ui-big-image" data-key="1">
      <img src="https://picsum.photos/1200/1200/?image=804" alt="" />
    </div>
    <div class="ui-big-image" data-key="2">
      <img src="https://picsum.photos/1200/1200/?image=838" alt="" />
    </div>
    <div class="ui-big-image" data-key="3">
      <img src="https://picsum.photos/1200/1200/?image=832" alt="" />
    </div>
    <div class="ui-big-image" data-key="4">
      <img src="https://picsum.photos/1200/1200/?image=836" alt="" />
    </div>
    <div class="ui-big-image" data-key="5">
      <img src="https://picsum.photos/1200/1200/?image=823" alt="" />
    </div>
  </div>
  <div class="ui-thumbnails">
    <div class="ui-thumbnail" tabindex="-1" data-key="0">
      <img src="https://picsum.photos/1200/1200/?image=1005" alt="" />
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
    <div class="ui-thumbnail" tabindex="-1" data-key="1">
      <img src="https://picsum.photos/1200/1200/?image=804" alt="" />
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
    <div class="ui-thumbnail" tabindex="-1" data-key="2">
      <img src="https://picsum.photos/1200/1200/?image=838" alt="" />
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
    <div class="ui-thumbnail" tabindex="-1" data-key="3">
      <img src="https://picsum.photos/1200/1200/?image=832" alt="" />
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
    <div class="ui-thumbnail" tabindex="-1" data-key="4">
      <img src="https://picsum.photos/1200/1200/?image=836" alt="" />
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
    <div class="ui-thumbnail" tabindex="-1" data-key="5">
      <img src="https://picsum.photos/1200/1200/?image=823" alt="" />
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
  </div>
  <div class="ui-content">

    <nav class="ui-nav">
      <button id="prev" tabindex="-1" title="Previous">&lt;</button>
      <button id="next" tabindex="-1" title="Next">&gt;</button>
    </nav>

    <div class="ui-articles">
      <article class="ui-article" data-key="0">
        <h2 class="ui-heading">Stephen Shaw</h2>
        <p class="ui-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae cupiditate assumenda nemo delectus totam atque quas suscipit dicta.</p>
      </article>
      <article class="ui-article" data-key="1">
        <h2 class="ui-heading">David Khourshid</h2>
        <p class="ui-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod sapiente soluta iusto molestias ullam. </p>
      </article>
      <article class="ui-article" data-key="2">
        <h2 class="ui-heading">Coding Compadre</h2>
        <p class="ui-paragraph">Lorem ipsum dolor sit, amet consectetur adipisicing elit. </p>
      </article>
      <article class="ui-article" data-key="3">
        <h2 class="ui-heading">Boolean Buddy</h2>
        <p class="ui-paragraph">Lorem ipsum dolor sit amet consectetur, adipisicing elit. </p>
      </article>
      <article class="ui-article" data-key="4">
        <h2 class="ui-heading">Animation Amigo</h2>
        <p class="ui-paragraph">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestias exercitationem voluptatibus</p>
      </article>
      <article class="ui-article" data-key="5">
        <h2 class="ui-heading">Keyframe Companion</h2>
        <p class="ui-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae soluta reprehenderit, ut doloribus corrupti</p>
      </article>
    </div>
  </div>
</div>

Надеюсь, это поможет!