html

<div class="p-slide-cont js-slideCont">
  <!-- スライドは希望の数でOK 変更の場合はscss変数のスライド数も書き換える -->
  <div class="p-slide-cont__item js-slideItem">1</div>
  <div class="p-slide-cont__item js-slideItem">2</div>
  <div class="p-slide-cont__item js-slideItem">3</div>
  <div class="p-slide-cont__item js-slideItem">4</div>
  <div class="p-slide-cont__item js-slideItem">5</div>
</div>

JavaScript

//js処理用メディアクエリ
let mediaFlg;
let width;
function media() {
  width = window.innerWidth;
  if (width > 1024) {
    mediaFlg = "pc";
  } else if (width >= 600) {
    mediaFlg = "tablet";
  } else if (width <= 599) {
    mediaFlg = "sp";
  }
}
window.addEventListener("load", function () {
  media();
});
window.addEventListener("resize", function () {
  media();
});
// 例 if (mediaFlg == "pc" || mediaFlg == "tablet") {~処理内容~}
// pointer-events制御用のpromise
function sleep(ms) {
  return new Promise(function (resolve) {
    setTimeout(function () {
      resolve();
    }, ms);
  });
}

if (document.querySelector(".js-slideCont") != null) {
  //任意のタイミングをトリガーに要素をスライド表示させる
  const slideItems = document.querySelectorAll(".js-slideItem");
  const slideItemsLength = slideItems.length;
  let exFlag = false;
  const exRatio = 1.8; // hover時の拡大比率を設定
  const transitionSpeed = 400; // アニメーションスピードを設定(scss変数と合わせる　s)

  //スライドイン関数を設定
  const itemSlide = function () {
    let zIndex; // 書き換えられるz-index格納用の変数を設定

    // 全ての.slide-itemに付与されているz-indexを取得
    const getIndexNum = function (num) {
      return document.defaultView.getComputedStyle(slideItems[num], null).zIndex;
    };

    slideItems.forEach(function (elem, index) {
      // css設定用に各スライドにclass付与
      elem.classList.add(`c-slide--${index + 1}`);
      // 各スライドの横幅を取得
      const elemWidth = elem.offsetWidth;

      // マウスオーバー時の挙動を設定
      elem.addEventListener("mouseenter", function () {
        //マウスオーバーされている要素のz-indexを取得
        zIndex = document.defaultView.getComputedStyle(elem, null).zIndex;

        //全てのslide-itemに付与されているz-indexの最大値を取得してz-indexを上書きするか判別
        const indexNumArray = [];
        for (let i = 0; i < slideItemsLength; i++) {
          indexNumArray.push(getIndexNum(i));
        }
        if (zIndex <= parseInt(Math.max.apply(null, indexNumArray))) {
          elem.style.zIndex = parseInt(Math.max.apply(null, indexNumArray)) + 1;
        }
        if (mediaFlg == "pc") {
          //マウスオーバーされている要素のwidthを拡大
          elem.style.width = (100 / slideItemsLength) * exRatio + "%";
          console.log();
          if (index === slideItemsLength - 1 && exFlag === false) {
            elem.style.transform = "translateX(" + -(elemWidth * exRatio - elemWidth) + "px)";
          }
        }
      });

      // マウスリーブ時の挙動
      elem.addEventListener("mouseleave", function () {
        if (mediaFlg == "pc") {
          elem.style.width = 100 / slideItemsLength + "%";
        } else if (mediaFlg == "sp") {
          elem.style.width = 100 + "%";
        }
        if (index === slideItemsLength - 1) {
          elem.style.transform = "translateX(0%)";
        }
      });

      //リサイズ時にコンテンツ幅を調整
      window.addEventListener("resize", function () {
        if (mediaFlg == "pc") {
          elem.style.width = 100 / slideItemsLength + "%";
        } else if (mediaFlg == "sp" || mediaFlg == "tablet") {
          elem.style.width = 100 + "%";
        }
      });

      // pointer-eventsを制御
      elem.addEventListener("click", function () {
        async function disableEvents() {
          for (let i = 0; i < slideItemsLength; i++) {
            slideItems[i].classList.add("is-noevents");
          }
        }
        async function enableEvents() {
          await disableEvents();
          await sleep(400);
          for (let i = 0; i < slideItemsLength; i++) {
            slideItems[i].classList.remove("is-noevents");
          }
        }
        enableEvents();
        if (exFlag === true) {
          exFlag = false;
        } else {
          exFlag = true;
        }

        // クリック状態のstyleを適用
        elem.classList.toggle("is-clicked");
        if (index === slideItemsLength - 1) {
          elem.style.transform = "translateX(0%)";
        }
      });
    });
  };
  // 関数発火
  itemSlide();
}

scss

$numSlides: 5; // スライド数が変わる場合ここだけ変更
$transitionSpeed: 400ms;

.p-slide-cont {
  width: 100%; // 希望のギャラリー大枠
  height: 80vh; // 希望のギャラリー縦幅
  position: relative;
  overflow: hidden;
  @include mqS {
    height: 100vh;
  }
  @include mqSM {
    height: 100vh;
  }
  .p-slide-cont__item {
    position: absolute;
    top: 0;
    z-index: 1;
    width: calc(100% / $numSlides);
    height: 100%;
    background: #fff;
    overflow: hidden;
    border: 1px solid #333;
    transition: transform $transitionSpeed, width $transitionSpeed, height $transitionSpeed, left $transitionSpeed, top $transitionSpeed;
    &.is-clicked {
      width: 100% !important;
      left: 0% !important;
      transition: width $transitionSpeed, height $transitionSpeed, left $transitionSpeed, top $transitionSpeed;
    }

    @for $i from 1 through $numSlides {
      &.c-slide--#{$i} {
        left: calc(calc(100% / $numSlides) * ($i - 1));
        @include mqSM {
          left: 0%;
          top: calc(calc(100% / $numSlides) * ($i - 1));
          width: 100%;
          height: calc(calc(100vh / $numSlides));
          &.is-clicked {
            height: 100vh;
            top: 0;
          }
        }
        @include mqS {
          left: 0%;
          top: calc(calc(100% / $numSlides) * ($i - 1));
          width: 100%;
          height: calc(calc(100vh / $numSlides));
          &.is-clicked {
            height: 100vh;
            top: 0;
          }
        }
      }
    }
    &.is-noevents {
      pointer-events: none;
    }
  }
}