<section>
    <div class="container">
      <div class="row justify-content-center m-0">
        <div class="col-9 p-0">
          
          <div class="form_wrapper position-relative">
            <!--left tab genrate-->
            <div class="get_thumbnail">
              <ul class="new_steps pichtProlist">
                <li class="thumbnail disabled step_0 personalInfo move" data-index="0">Slide 1</li>
              </ul>
            </div>
            <!--end left tab genrate-->
            <div class="form_box">
              <ul class="sliders">
                <!--tab 1 start here-->
                <li class="slide active">
                  <h1>slide 1</h1>
                </li>
                <li class="slide">
                  <h1>slide 2</h1>
                </li>
                <li class="slide">
                  <h1>slide 3</h1>
                </li>

                <li class="slide">
                  <h1>slide 4</h1>
                </li>
              </ul>
            </div>
            <div class="sideBarElement">
              <ul class="steps pichtProlist">
                <li class="thumbnail step_1" data-index="1">Slide 2</li>
                <li class="thumbnail step_2" data-index="2">Slide 3</li>
                <li class="thumbnail step_3" data-index="3">Slide 4</li>
              </ul>
            </div>
          </div>

        </div>
      </div>
    </div>
  </section>
.form_box {
    overflow: hidden;
    box-shadow: 1px 1px 65px 0 rgba(0, 0, 0, 0.16);
}
.sliders {
    display: flex;
    position: relative;
}
.slide {
    height: 400px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-align-items: center;
    align-items: center;
}
    .pichtProlist {
    position: absolute;
    width: 567px;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    right: auto;
    top: 220px;
}

.new_steps {
    position: absolute;
    left: -170px;
    transform: rotate(-90deg);
    right: auto;
    width: 302px;
    top: 98px;
    text-align: center;
    z-index: 1;
}
.pichtProlist li {
    background-color: #034ea2;
    font-size: 20px;
    line-height: 32px;
    color: #ffffff;
    letter-spacing: 0.66px;
    box-shadow: 3px 0 6px 0 rgba(0, 0, 0, 0.2);
    display: block;
    padding: 8px 20px;
    margin-top: -1px;
    text-align: center;
    transform: rotate(-180deg);
    margin: 0 auto;
}
.steps li:not(:first-child) {
    pointer-events: none;
    opacity: 0.7;
}

.steps li:not(:first-child) {
    border-top: 0;
}
.disabled {
    pointer-events: none;
    opacity: 0.7;
}
.thumbnail {
    position: relative;
    cursor: pointer;
}
.step_2 {
    width: 90%;
}
.step_3 {
    width: 80%;
}

    var offset = $('.form_box').offset(),

      setps = $('.steps'),

      new_steps = $('.new_steps'),

      form_wrapper = $('.form_wrapper'),

      form_box_width = $('.form_box').width(),

      // container width

      container = $('.form_wrapper').width(),

      // slide parent

      slideWrapper = $('.sliders'),

      // slides

      slide = $('.slide'),

      //thumbnail lists

      thumbnailList = $('.thumbnail'),

      count = 0;

    //end of variables    

    slideWrapper.width(container * slide.length);

    slide.width(container);

    setoffset = () => {
      
      $('.steps, .new_steps').width(slide.height());

      $('.steps').offset({ left: (offset.left + form_box_width), top: offset.top });

      $('.new_steps').offset({ left: offset.left - (thumbnailList.outerHeight() * $('.new_steps li').length), top: offset.top });

    };

    setoffset();

    // thumbnailList click

    thumbnailList.click(function (e) {

      count++;

      currentTarget = $(e.target);

      currentIndex = currentTarget.attr('data-index');

      currentTarget.toggleClass('move');

      if (currentTarget.hasClass('move')) {

        if (count != slide.length + 1)

          currentTarget.animate({ top: - form_wrapper.width() - currentTarget.outerHeight() * count }, 1000).addClass('disabled');

        slideWrapper.animate({ left: '-=' + container + 'px' }, 1000).find('.slide.active').removeClass('active').next().addClass('active');

        setTimeout(() => {

          currentTarget.animate({ top: 0 }, 0).prependTo('.get_thumbnail .new_steps');

          currentTarget.next().removeClass('disabled');

          setoffset();

        }, 1000);

      } else {

        // console.log(currentIndex * container);

        slideWrapper.animate({ left: - currentIndex * container }, 1000);

        $('.steps').stop().css('margin-left', '0');

        // currentTarget.animate({ top: form_wrapper.width() + (currentTarget.outerHeight() * count) }, 1000);

        currentTarget.prevAll().animate({ top: form_wrapper.width() + (currentTarget.outerHeight() * count) }, 1000);

        setTimeout(() => {

          currentTarget.prevAll().not('personalInfo').animate({ top: 0 }, 0).prependTo('.steps').removeClass('disabled move');

          // currentTarget.animate({ top: 0 }, 0).prependTo('.steps').removeClass('disabled move');

          currentTarget.addClass('disabled move');

          setoffset();

          count = currentIndex;

        }, 1000);

      }

    });

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js