Jquery next button function is not looped to the first slide once reached end

Question

我创建了一个添加了下一个和上一个按钮的滑块。但是我遇到了一个我仍然无法弄清楚的问题。 单击下一个按钮时，它会导航到下一个内容，但在到达内容的末尾而不是显示下一个内容时，它会隐藏内容，再次单击下一个按钮时，它会再次循环到 id 1。有人可以帮我解决这个问题吗？我在下面添加了代码

 <div class="work_wrapper text-center">

                        <div class="work_content" id="1">
                            <h5 class="mb40">Global Bank with Back Offices in India</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor orci enim, sed lacinia mauris tempor in. Cras accumsan tortor vitae nisl ullamcorper, a ultrices ante fermentum. Vestibulum a consectetur enim. Mauris et nulla nisl. Etiam porta laoreet leo vitae cursus. Duis scelerisque, dui vitae bibendum varius, enim dolor viverra orci, vitae ultrices erat erat vel diam. Cras ut ex lacus. Praesent molestie metus id malesuada sodales. Sed in dolor mollis, imperdiet ligula in, pellentesque velit. In eu feugiat dui. Suspendisse egestas pretium laoreet. Curabitur varius consequat urna sit amet iaculis.</p>

                            <p>Integer est velit, egestas vel euismod id, posuere imperdiet ipsum. Curabitur arcu metus, tristique ultrices blandit vitae, varius et libero. Sed eu imperdiet urna, eu lobortis turpis. Aenean interdum sagittis lacus tristique facilisis. Suspendisse et volutpat mi. Nullam a est ullamcorper, fermentum lorem et, ullamcorper eros. Nam pulvinar nibh eu consectetur ullamcorper.</p>
                        </div>
                        <div class="work_content" id="2">
                            <h5 class="mb40">IT companies that serve global financial organizations</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor orci enim, sed lacinia mauris tempor in. Cras accumsan tortor vitae nisl ullamcorper, a ultrices ante fermentum. Vestibulum a consectetur enim. Mauris et nulla nisl. Etiam porta laoreet leo vitae cursus. Duis scelerisque, dui vitae bibendum varius, enim dolor viverra orci, vitae ultrices erat erat vel diam. Cras ut ex lacus. Praesent molestie metus id malesuada sodales. Sed in dolor mollis, imperdiet ligula in, pellentesque velit. In eu feugiat dui. Suspendisse egestas pretium laoreet. Curabitur varius consequat urna sit amet iaculis.</p>

                            <p>Integer est velit, egestas vel euismod id, posuere imperdiet ipsum. Curabitur arcu metus, tristique ultrices blandit vitae, varius et libero. Sed eu imperdiet urna, eu lobortis turpis. Aenean interdum sagittis lacus tristique facilisis. Suspendisse et volutpat mi. Nullam a est ullamcorper, fermentum lorem et, ullamcorper eros. Nam pulvinar nibh eu consectetur ullamcorper.</p>
                        </div>
                        <div class="work_content" id="3">
                            <h5 class="mb40">BFSI companies in India & MiddleEast</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor orci enim, sed lacinia mauris tempor in. Cras accumsan tortor vitae nisl ullamcorper, a ultrices ante fermentum. Vestibulum a consectetur enim. Mauris et nulla nisl. Etiam porta laoreet leo vitae cursus. Duis scelerisque, dui vitae bibendum varius, enim dolor viverra orci, vitae ultrices erat erat vel diam. Cras ut ex lacus. Praesent molestie metus id malesuada sodales. Sed in dolor mollis, imperdiet ligula in, pellentesque velit. In eu feugiat dui. Suspendisse egestas pretium laoreet. Curabitur varius consequat urna sit amet iaculis.</p>

                            <p>Integer est velit, egestas vel euismod id, posuere imperdiet ipsum. Curabitur arcu metus, tristique ultrices blandit vitae, varius et libero. Sed eu imperdiet urna, eu lobortis turpis. Aenean interdum sagittis lacus tristique facilisis. Suspendisse et volutpat mi. Nullam a est ullamcorper, fermentum lorem et, ullamcorper eros. Nam pulvinar nibh eu consectetur ullamcorper.</p>
                        </div>
                        <div class="grid-x align-center mt40">
                            <div class="cell small-6 medium-6 large-6 align-center">
                                <button class="button black button--moema" id="next">Next</button>
                            </div>
                            <div class="cell small-6 medium-6 large-6 align-middle">
                                <button class="button black button--moema" id="prev">Previous</button>
                            </div>
                        </div>

                    </div>

$(".work_content").each(function(e){
  if(e != 0){
    $(this).hide();

  }
})

$("#next").on("click",function(){
  if($(".work_wrapper .work_content:visible").next().length != 0){
     $(".work_wrapper .work_content:visible").next().show().prev().hide();
     }
  else {
    $(".work_wrapper .work_content:visible").hide();
    $(".work_wrapper .work_content:first").show();
  }
});

$("#prev").on("click",function(){
  if($(".work_wrapper .work_content:visible").prev().length != 0){
     $(".work_wrapper .work_content:visible").prev().show().next().hide();
  }
  else {
    $(".work_wrapper .work_content:visible").hide();
    $(".work_wrapper .work_content:last").show();
  }
});`