<div class="slider-controls" id="slider-controls">
  <div class="slider-controls__prev">prev</div>
  <div class="slider-controls__next">next</div>
</div>
<div class="my-slider">
  <div class="my-slider__item"><div class="my-slider__inner"><div class="my-slider__sq">
    <img class="my-slider__image" src="https://static.pizzasushiwok.ru/images/menu_new/2-1300.jpg" alt="pizza">
  </div></div></div>

  <div class="my-slider__item"><div class="my-slider__inner"><div class="my-slider__sq">
    <img class="my-slider__image" src="https://static.pizzasushiwok.ru/images/menu_new/2-1300.jpg" alt="pizza">
  </div></div></div>

  <div class="my-slider__item"><div class="my-slider__inner"><div class="my-slider__sq">
    <img class="my-slider__image" src="https://static.pizzasushiwok.ru/images/menu_new/2-1300.jpg" alt="pizza">
  </div></div></div>

  <div class="my-slider__item"><div class="my-slider__inner"><div class="my-slider__sq">
    <img class="my-slider__image" src="https://static.pizzasushiwok.ru/images/menu_new/2-1300.jpg" alt="pizza">
  </div></div></div>

  <div class="my-slider__item"><div class="my-slider__inner"><div class="my-slider__sq">
    <img class="my-slider__image" src="https://static.pizzasushiwok.ru/images/menu_new/2-1300.jpg" alt="pizza">
  </div></div></div>

  <div class="my-slider__item"><div class="my-slider__inner"><div class="my-slider__sq">
    <img class="my-slider__image" src="https://static.pizzasushiwok.ru/images/menu_new/2-1300.jpg" alt="pizza">
  </div></div></div>
</div>

/* body {
  background-color: #152238;
} */

.my-slider {
/*  transition: transform 1s cubic-bezier(.67,.2,.37,1.71) */
}

.my-slider__item {
  transition: transform 1s;
}

.my-slider__inner {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 500px;
}

.my-slider__sq {
    width: 350px;
    height: 350px;
    margin: 0;
    transition: width 1s, height 1s;
}

.my-slider__image {
    width: 100%;
/*     height: 100%; */
    transform: rotate(0deg);
    opacity: .7;
/*     transition: transform 1s cubic-bezier(.67,.2,.37,1.71), opacity 1s linear; */
    transition: transform 1s ease-out, opacity 1s linear;
}

.pizza-active {
  transform: scale(2);
}

.pizza-active .my-slider__image {
  opacity: 1;
}

.tns-slide-active:first-of-type {
  transform: translateX(-50%);
}

.tns-slide-active:last-of-type {
  transform: translateX(50%);
}

let slider = tns({
    container: '.my-slider',
    items: 3,
    center: true,
    nav: false,
    speed: 1000,
    controlsContainer: "#slider-controls",
    // Только центральной кнопке класс
    onInit: () => document.querySelectorAll('.tns-slide-active')[1].classList.add('pizza-active'),
});

let rotate = 0,
    rotateDeg;

document.querySelector('.slider-controls__prev').onclick = function () {
    let info = slider.getInfo(),
        indexPrev = info.index,
        indexCurrent = info.index-1;

    info.slideItems[indexPrev].classList.remove('pizza-active');
    info.slideItems[indexCurrent].classList.add('pizza-active');
    rotate++;
    rotateDeg = rotate * 45;
    for(let val of info.slideItems) {
        val.querySelector('.my-slider__image').style.transform = 'rotate('+ rotateDeg.toString() +'deg)';
    }
};

document.querySelector('.slider-controls__next').onclick = function () {
    let info = slider.getInfo(),
        indexPrev = info.index,
        indexCurrent = info.index+1;

    info.slideItems[indexPrev].classList.remove('pizza-active');
    info.slideItems[indexCurrent].classList.add('pizza-active');
    rotate--;
    rotateDeg = rotate * 45;
    for(let val of info.slideItems) {
        val.querySelector('.my-slider__image').style.transform = 'rotate('+ rotateDeg.toString() +'deg)';
    }
};