在前一个div滑出并隐藏后，如何在一个div中滑动，然后在新的div中重复，而不制作幻灯片？

<div class="slider-container">
  <div class="slide">内容1</div>
  <div class="slide">内容2</div>
  <div class="slide">内容3</div>
  <!-- 更多的slide -->
</div>

.slider-container {
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.slide {
  width: 100%;
  height: 300px;
  float: left;
}

var sliderContainer = document.querySelector('.slider-container');
var slides = document.querySelectorAll('.slide');
var slideIndex = 0;

function slide() {
  slideIndex++;
  if (slideIndex >= slides.length) {
    slideIndex = 0;
  }
  sliderContainer.style.marginLeft = -slideIndex * 100 + '%';
}

setInterval(slide, 3000);