[html]<div class="wrapperpan">
 
<div class="panslider-wrap">
   <div class="panslider current">
     <button class="index"><span>kobe</span></button>
     <figure class="img">
       first
     </figure>
   </div>
   <div class="slider current">
     <button class="index"><span>kobe</span></button>
     <figure class="img">
       second
     </figure>
   </div>
   <div class="slider current">
     <button class="index"><span>kobe</span></button>
     <figure class="img">
       third
     </figure>
   </div>
   <div class="slider current">
     <button class="index"><span>kobe</span></button>
     <figure class="img">
       fouth
     </figure>
   </div>
   <div class="slider current">
     <button class="index"><span>kobe</span></button>
     <figure class="img">
       fifth
     </figure>
   </div>
  </div>
 
</div>

   <script>const $pansliderWrap = $('.panslider-wrap');
const $slider = $pansliderWrap.find('.panslider');
const $index = $panslider.find('.index');
const $img = $panslider.find('.img');
const pansliderNum = $panslider.length;
let indexWidth = $index.width() + 1;
let pansliderWrapWidth = $pansliderWrap.width();
const duration = 300;

$(window).on('resize', function() {
pansliderWrapWidth = $pansliderWrap.width();
});

for(let i = 0; i < pansliderNum; i++) {
  $slider.eq(i).css({
    left: i * indexWidth,
    width: pansliderWrapWidth - (i * indexWidth)
  });
}

$index.on('click', function() {
  let num = $index.index(this);
  let start = pansliderWrapWidth - (indexWidth * (pansliderNum - num - 1));
 
  for(let i = num; i > 0; i--){
    $panslider.eq(i).stop().animate({left: indexWidth * i}, duration, 'swing');
  }

  for(let i = num; i < pansliderNum; i++) {
    $panslider.eq(i + 1).stop().animate({left: start + (indexWidth * (i - num))}, duration, 'swing');
  }
});
  </script>

   <style>
input,
button,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  outline: none;
}

input[type='button'],
button{
  cursor: pointer;
}

//レイアウト
.section-wrap{
  padding: 3%;
}

//コンテンツエリア
.wrapperpan{
  max-width: 960px;
  width: 100%;
  padding: 0 3%;
  margin: 0 auto;
}

//ヘッダー
.header{
  text-align: center;
  .title{
    position: relative;
    font-weight: bold;
    font-family: $f-qsand;
    font-size: 40px;
    letter-spacing: .1em;
    color: #233567;
  }
}

//フッター

.panslider-wrap{
  width: 100%;
  height: 300px;
  background: transparent;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
 
  .panslider{
    position: absolute;
    top: 0;
    display: flex;
    width: 100%;
    height: 100%;
   
    .index{
      width: 50px;
      height: 100%;
      color: #fff;
      font-weight: bold;
      border: 1px solid #233567;
      background: #315b96;
      border-radius: $radius-width;
      span{
        -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
      }
    }
   
    .img{
      display: flex;
      justify-content: center;
      align-items: center;
      color: #233567;
      font-weight: bold;
      width: calc(100% - 50px);
      border-radius: $radius-width;
      background: #ffdfdf;
      transition: width .7s;
    }
   
    &.current{
      width: 100%;
      .img{
        width: calc(100% - 50px);
      }
    }
  }
}
</style>[/html]