如何用jQuery连接移动幻灯片的按钮点击功能？

<script src="https://cdn.jsdelivr.net/jquery/3.6.0/jquery.min.js"></script>

<div id="slideshow">
  <div class="slide">Slide 1</div>
  <div class="slide">Slide 2</div>
  <div class="slide">Slide 3</div>
</div>

<button id="btn1">Slide 1</button>
<button id="btn2">Slide 2</button>
<button id="btn3">Slide 3</button>

$(document).ready(function() {
  $("#btn1").click(function() {
    $(".slide").hide();
    $(".slide:nth-child(1)").show();
  });

  $("#btn2").click(function() {
    $(".slide").hide();
    $(".slide:nth-child(2)").show();
  });

  $("#btn3").click(function() {
    $(".slide").hide();
    $(".slide:nth-child(3)").show();
  });
});

#slideshow {
  width: 400px;
  height: 300px;
  position: relative;
  overflow: hidden;
}

.slide {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}