滑块的动作很奇怪

Question

我做了这个滑块。无法使用Slick，所以我不得不对其进行硬编码。

问题是：可行，但存在一些问题。从上一张到下一张幻灯片的过渡与上一张仅跳过fadeIn的幻灯片之间的过渡非常顺利。另一个问题是职位。它从一个地方跳到上一个地方。我不确定display: none;是否有问题。

$(document).ready(function() {
  var current = $('.slider.show');

  $('.left-arrow').on('click', function() {
    console.log('clicked');
    var next = current.prev();
    if (current.is(':first-child')) {
      next = $('.slider:last-child');
    }
    $('.slider.show').fadeOut('slow', function() {
      $(this).removeClass('show');
    });

    next.fadeIn('slow', function() {
      current = next.addClass('show');
    });

    return false;
  })

  $('.right-arrow').click(function() {

    var next = current.next();

    if (current.is(':last-child')) {
      next = $('.slider:first-child');
    }

    $('.slider.show').fadeOut('slow', function() {
      $(this).removeClass('show');
    });

    next.fadeIn("slow", function() {
      current = next.addClass('show');
    });

    return false;
  });
});

.slider {
  text-align: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  display: none;
}

.slide {
  display: none;
}

.title {
  width: 100%;
  font-size: 60px;
  padding: 310px 0 50px;
}

.text {
  width: 100%;
  margin: 0 auto;
  color: $white;
  padding-bottom: 50px;
}

.col-6 {
  margin: 0 auto;
}

.slider-last {
  width: 74%;
}

.btn {
  width: 132px;
  margin-bottom: 260px;
  font-family: $font-seven;
  font-size: 16px;
  padding: 10px 33px 12px 17px;
}

.left-arrow,
.right-arrow {
  padding: 0;
  width: 65px;
  margin-bottom: 0;
}

.show {
  display: block;
}

@media (min-width: 480) {
  .title {
    font-size: 25px;
    padding: 125px 0 127px;
    width: 50%;
  }
  .text {
    padding-bottom: 30px;
    width: 85%;
    font-size: 16px;
  }
  .btn {
    display: none;
  }
  .arrow {
    display: block;
    background-size: 60% 60%;
  }
  .left-arrow {
    left: 15px;
  }
  .right-arrow {
    right: 45px;
  }
}

@media (min-width: 768px) {
  .title {
    font-size: 35px;
    padding: 125px 0 25px;
    width: 85%;
  }
  .text {
    display: none;
  }
  .btn {
    margin-bottom: 90px;
  }
  .arrow {
    display: block;
    background-size: 60% 60%;
  }
  .left-arrow,
  .right-arrow {
    margin-bottom: 0px;
  }
  .left-arrow {
    left: 10px;
  }
  .right-arrow {
    right: 40px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="slide">
  <div class="slider show" style="background-image: url(./images/slider_pic_1.png);">
    <div class="wrapper">
      <div class="row">
        <div class="col-1">
          <button class="btn arrow left-arrow" style="background-image: url(./images/left_arrow.png);"></button>
        </div>
        <div class="col-10">
          <h1 class="title">
            Itaque earum rerum hic tenetur
          </h1>
        </div>
        <div class="col-1">
          <button class="btn arrow right-arrow" style="background-image: url(./images/right_arrow.png);"></button>
        </div>
      </div>
      <div class="row">
        <div class="col-6">
          <p class="text">
            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-12">
          <button type="button" class="btn" style="background-image: url(./images/button_arrow_white.png);">Contact us</button>
        </div>
      </div>
    </div>
  </div>
  <div class="slider" style="background-image: url(./images/slider_pic_2.png);">
    <div class="wrapper">
      <div class="row">
        <div class="col-1">
          <button class="btn arrow left-arrow" style="background-image: url(./images/left_arrow.png);"></button>
        </div>
        <div class="col-10">
          <h1 class="title">
            Nam libero tempore, cum soluta
          </h1>
        </div>
        <div class="col-1">
          <button class="btn arrow right-arrow" style="background-image: url(./images/right_arrow.png);"></button>
        </div>
      </div>
      <div class="row">
        <div class="col-6">
          <p class="text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.Vestibulum in urna quis neque porttitor sagittis.
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-12">
          <button type="button" class="btn" style="background-image: url(./images/button_arrow_white.png);">Contact us</button>
        </div>
      </div>
    </div>
  </div>
  <div class="slider" style="background-image: url(./images/slider_pic_3.png);">
    <div class="wrapper">
      <div class="row">
        <div class="col-1">
          <button class="btn arrow left-arrow" style="background-image: url(./images/left_arrow.png);"></button>
        </div>
        <div class="col-10">
          <h1 class="title">
            Itaque earum rerum hic tenetur
          </h1>
        </div>
        <div class="col-1">
          <button class="btn arrow right-arrow" style="background-image: url(./images/right_arrow.png);"></button>
        </div>
      </div>
      <div class="row">
        <div class="col-6">
          <p class="text">
            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-12">
          <button type="button" class="btn" style="background-image: url(./images/button_arrow_white.png);">Contact us</button>
        </div>
      </div>
    </div>
  </div>
</section>

有什么意见吗？