如何使用javascript在已经有效的代码块中添加幻灯片切换效果？

Question

第一次在这里问一个问题。自去年3月以来，我一直在学习/学习HTML，我对基础知识感到非常满意。当然，我想用Javascript扩展这些基础知识。

我觉得自己非常善于学习和随机编写代码并向后设计它们以使某些东西适合我......但不是作为一个超级新秀级别的Javacript初学者。

话虽如此，我设法遇到两行不同的Javascript代码并将它们合并在一起，以便有一个上一个和下一个按钮，在一个无限循环上运行，带有点，让人知道确切隐藏了多少项。基本上你单击右箭头，div消失，另一个div代替它。您单击一个点，它也会将您带到该特定div。幸运的是，所有这些都很有效，但我希望当您单击右键时显示​​实际的幻灯片效果/转换。我希望实际幻灯片从右向左移动，反之亦然。

我有一个名为“猫头鹰旋转木马”插件的东西，我碰巧遇到了很好的工作，但我不能（或者我不够了解）对现有代码进行编辑以适应我的需要需要，这就是为什么我宁愿从头开始做一些事情，所以我会知道并理解当我稍作修改时会发生什么。

请，没有插件建议或jQuery解决方案。我想暂时正确理解Javascript的基础知识。

.ms-content {
	max-width: 100%;
}

.btn-container {
	text-align: center;
	padding-bottom: 10px;	
}

.btn-floating {
	font-size: 42px;
	text-decoration: none;
	transition: all 0.5s ease;
	top: 20px;
	margin-left: 20px;
	margin-right: 20px;
	cursor: pointer;			
}

.btn-floating:hover {
	color: #4FAD52;
}

.dot-two {
  cursor: pointer;
  height: 13px;
  width: 13px;
  margin: 0 5px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #7AC143;
}

.ms-slide-two {
  width: 100%;
  height: 100px;
}

.ms-slide-two:nth-of-type(3) {
  background-color: #ccc;
}

.ms-slide-two:nth-of-type(4) {
  background-color: #999;
}

.ms-slide-two:nth-of-type(5) {
  background-color: #666;
}

<article class="ms-content">
  <div class="btn-container">
    <a class="btn-floating" onclick="plusDivs_slide_two(-1)">&#10094;</a>     
    <a class="btn-floating" onclick="plusDivs_slide_two(1)">&#10095;</a>
  </div>
  <div style="text-align:center; padding-bottom:20px;">
    <span class="dot-two" onclick="currentDivs_slide_two(1)"></span>
  	<span class="dot-two" onclick="currentDivs_slide_two(2)"></span>
    <span class="dot-two" onclick="currentDivs_slide_two(3)"></span> 
  </div>
        
  <div class="ms-slide-two">           
    <p>Div One</p>      
  </div>
        
  <div class="ms-slide-two">                     
    <p>Div Two</p>                         
  </div>
  
  <div class="ms-slide-two">                     
    <p>Div Three</p>                         
  </div>
  
        <!-- Manual Slide -->
        <script>
        var slideIndex_slide_two = 1;
		showDivs_slide_two(slideIndex_slide_two);

		function plusDivs_slide_two(n) {
  		  showDivs_slide_two(slideIndex_slide_two += n);
		}
		
		function currentDivs_slide_two(n) {
  		  showDivs_slide_two(slideIndex_slide_two = n);
		}

		function showDivs_slide_two(n) {
		  var i;
		  var x = document.getElementsByClassName("ms-slide-two");
		  var dots = document.getElementsByClassName("dot-two");
		  if (n > x.length) {slideIndex_slide_two = 1}
		  if (n < 1) {slideIndex_slide_two = x.length}
		  for (i = 0; i < x.length; i++) {
		     x[i].style.display = "none";
		  }
		  for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");
		  }
		  x[slideIndex_slide_two-1].style.display = "block";
		  dots[slideIndex_slide_two-1].className += " active";
		}
		</script>
        <!-- End Manual Slide -->