我想在我的网站上添加一个幻灯片。我正在使用html，css，并且想使用jquery。如何创建响应式图像幻灯片

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div id="slideshow"></div>

$(document).ready(function() {
  // 定义图像URL数组
  var images = [
    "image1.jpg",
    "image2.jpg",
    "image3.jpg"
  ];

  // 创建幻灯片
  $("#slideshow").css("background-image", "url(" + images[0] + ")");

  // 设置幻灯片切换时间间隔（以毫秒为单位）
  var interval = 3000;

  // 定义当前图像索引
  var currentIndex = 0;

  // 定义幻灯片切换函数
  function changeSlide() {
    currentIndex++;
    if (currentIndex >= images.length) {
      currentIndex = 0;
    }
    $("#slideshow").fadeOut("slow", function() {
      $(this).css("background-image", "url(" + images[currentIndex] + ")").fadeIn("slow");
    });
  }

  // 设置定时器来自动切换幻灯片
  setInterval(changeSlide, interval);
});

#slideshow {
  width: 100%;
  height: 400px;
  background-size: cover;
  background-position: center;
}