サムネイルの画像切り替え　メイン画像をスライダーにする方法について

前提・実現したいこと

サムネイルの画像切り替えを編集しています。
ここからメイン画像にprev nextボタンを付けたスライダーにするには
どうしたらよいでしょうか。

該当のソースコード

<hrml>
 <div id="content1">
  <div id="featured_img">
    <img id="img" src="画像1">
  </div>
  <div id="thumb_img" class="cf">
      <img class="active" src="画像01" onclick="changeimg('画像1',this);">
      <img src="画像02" onclick="changeimg('画像2',this);">
    <img src="画像03" onclick="changeimg('画像3',this);">
      </div>
</div>
</html>

<css>
.cf:before,
.cf:after{
	content:"";
	display:table;
}
 
.cf:after{
	clear:both;
}
 
.cf{
	zoom:1;
}

#content1 {
  max-width: 550px;
  margin: 3rem auto;
  text-align: center;
}

#featured_img img,
#thumb_img img {
  max-width: 100%;
  padding: 3px;
 }

#thumb_img {
    margin-top:2%;
    text-align: left;
    font-size: 10px;
    cursor: pointer;
    margin-right:100px;
    max-width: 100%;
    width: 100%;
       
      }
    
    img.active{
      border:1px solid #cac6b8;
      
    }
    
    &:last-child{
      margin-right:10;
    }
  }
</css>

<script>
function changeimg(url,e) {
  document.getElementById("img").src = url;
  let nodes = document.getElementById("thumb_img");
  let img_child = nodes.children;
  for (i = 0; i < img_child.length; i++) {
    img_child[i].classList.remove('active')
  }
  e.classList.add('active');
}

</script>