javascript prev,next

html과 css코드는 지난 toggle 게시물과 같습니다.
<좌>버튼을 클릭하면 현재 선택된 거에서 좌측으로 이동 선택된다.
<우>버튼을 클릭하면 현재 선택된 거에서 우측으로 이동 선택된다.

/*html*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<button>좌</button>
<button>우</button>
<div class="box-1 flex flex-jc-c flex-ai-c height-100vh bg-red">
  <nav></nav>
  <nav></nav>
  <nav class="active"></nav>
  <nav></nav>
  <nav></nav>
  <nav></nav>
  <nav></nav>
  <nav></nav>
  <nav></nav>
  <nav></nav>
</div>

/*CSS*/
body {
  margin:0;
}

.flex {
  display:flex;
}

.flex-jc-c {
  justify-content:center;
}

.flex-ai-c {
  align-items:center;
}

.height-100vh {
  height:100vh;
}

.bg-red {
  background-color:red;
}

.box-1 > nav {
  width:90px;
  height:90px;
  background-color:gold;
  cursor:pointer;
}

.box-1 > nav:nth-child(2n) {
  background-color:blue;
}

.box-1 > nav.active {
  background-color:black;
}

/자바스크립트/
console.clear();
$('button:nth-of-type(1)').click(function(){
  var $current = $('.box-1 >nav.active');
  $current.removeClass('active');
  
  var $post = $current.prev();
  $post.addClass('active');
})

$('button:nth-of-type(2)').click(function(){
  var $current = $('.box-1 >nav.active');
  $current.removeClass('active');
  
  var $post = $current.next();
  $post.addClass('active');
})