Разработка - Вертикальная навигация в виджете на боковой панели

Пишем наше тело:

HTML:

<!--
A carousel / slideshow with vertical navigation
where each slide goes in opposite direction.
-->
<div class="ss">
  <div class="ss-col">
    <div class="ss-col-content">
     <div class="ss-col-content-child js-ss-col-even">
       <img class="ss-img" src="https://via.placeholder.com/400x600/1a1713/f2f2f2/?text=1">
            <img class="ss-img" src="https://via.placeholder.com/400x600/4a515f/f2f2f2/?text=3">
            <img class="ss-img" src="https://via.placeholder.com/400x600/565a97/f2f2f2/?text=5">
       <img class="ss-img" src="https://via.placeholder.com/400x600/7f6698/f2f2f2/?text=7">
      </div>
    </div>
  </div>
  <div class="ss-col">
    <div class="ss-col-content">
     <div class="ss-col-content-child odd js-ss-col-odd">
       <img class="ss-img" src="https://via.placeholder.com/400x600/e5bfa1/000/?text=2">
       <img class="ss-img" src="https://via.placeholder.com/400x600/eeefea/000/?text=4">
       <img class="ss-img" src="https://via.placeholder.com/400x600/ffdc73/000/?text=6">
       <img class="ss-img" src="https://via.placeholder.com/400x600/fb836b/000/?text=8">
      </div>
    </div>
  </div>

   <div class="ss-controls">
     <button class="ss-controls-btn prev js-ss-prev">Prev</button>
     <button class="ss-controls-btn next js-ss-next">Next</button>
   </div>
 </div>

Пишем стиль:

SCSS:

$spacer: 1rem;
$clrBg: white;
$clrText: black;
$slideshowWidth: 95vh;
$slideshowRatio: 1.5;
$slideshowHeight: $slideshowWidth/2*1.5;
$speed: 400ms;

.ss { // ss = slideshow
  position: relative;
  display: flex;
  justify-content: space-between;
  width: $slideshowWidth;
    margin: 2rem auto 0;

  // define slideshow half width
  &-col {
    position: relative;
    width: 50%;

        &:first-child .ss-col-content {
            border-radius: 5px 0 0 5px;   
        }
        
        &:nth-child(2) .ss-col-content {
            border-radius: 0 5px 5px 0;   
        }
        
    // define slideshow height with padding-top
    &-content {
      padding-top: $slideshowHeight;
      position: relative;
      overflow: hidden;
    }

    // make content absolute to respect padding-top
    &-content-child {
      display: flex;
      flex-direction: column;
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      // height: auto; // by js inline
      transition: transform $speed ease-out;

            &.odd {
                flex-direction: column-reverse;
            }
    }
  }

  &-img {
    display: block;
    position: relative;
    width: 100%;
    height: $slideshowHeight;
    object-fit: cover;
  }

  &-controls {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    display: flex;
        border-radius: 3px;
        border: 1px solid #ccc;
        overflow: hidden;

    &-btn {
      width: 3.5rem;
      height: 2.5rem;
            line-height: 2.5rem;
      border: none;
            cursor: pointer;
            text-transform: uppercase;
            font-size: 0.8rem;

      &:hover, &:focus {
        outline: none;
                color: #aaa;
      }
    }
  }
}

Пишем jquery:

JavaScript:

const getFirstEl = (className) => document.getElementsByClassName(className)[0];
const setTranslate = ($el, value) => $el.style.transform = `translateY(${value})`;

const elColEven = getFirstEl('js-ss-col-even');
const elColOdd = getFirstEl('js-ss-col-odd');
const btnPrev = getFirstEl('js-ss-prev');
const btnNext = getFirstEl('js-ss-next');
const stHalf = elColEven.childElementCount;
const ndHalf = elColOdd.childElementCount;
let page = 0;

function setOddToFirst() {
    const value = `-${100 / ndHalf * (ndHalf - 1)}%`;
    elColOdd.style.transition = 'none'; 
    setTranslate(elColOdd, value);
    setTimeout(() => elColOdd.style.transition = '');
}

function updateSliders() {
    setTranslate(elColEven, `-${(100 / stHalf) * page}%`);
    setTranslate(elColOdd, page === ndHalf
        ? `${100 / ndHalf}%` // if goes beyond last when odd child
        : `-${(100 / ndHalf) * (ndHalf - 1 - page)}%`);
}

setOddToFirst();

btnPrev.addEventListener('click', () => {
    if (page === 0) { return false; }
    page--;
    return updateSliders();
});

btnNext.addEventListener('click', () => {
    if (page === stHalf - 1) { return false; }
    page++;
    return updateSliders();
});

Смотрим получившийся результат:

Разработка Вертикальная навигация в виджете на боковой панели

Ещё ресурсы от baltun