如何实现嵌入式Slider来显示数据？

<div id="slider-container">
  <ul id="slider">
    <!-- Slider的内容，可以是图片、文字等 -->
    <li>Slide 1</li>
    <li>Slide 2</li>
    <li>Slide 3</li>
  </ul>
</div>

#slider-container {
  width: 400px;
  height: 200px;
  overflow: hidden;
}

#slider {
  width: 1200px;  /* Slider内容的总宽度 */
  list-style-type: none;
  padding: 0;
  margin: 0;
  transition: transform 0.5s;  /* 设置动画效果 */
}

#slider li {
  float: left;
  width: 400px;
  height: 200px;
}

$(document).ready(function() {
  var slider = $('#slider');
  var slideWidth = slider.find('li').outerWidth();  /* 获取每个Slider元素的宽度 */
  var slideCount = slider.find('li').length;  /* 获取Slider元素的总数 */
  var totalWidth = slideWidth * slideCount;  /* 计算Slider的总宽度 */

  slider.width(totalWidth);

  function slide() {
    slider.animate({'margin-left': -slideWidth}, 1000, function() {
      /* 将第一个Slider元素移动到最后一个位置 */
      slider.find('li:first').appendTo(slider);
      slider.css('margin-left', 0);
    });
  }

  setInterval(slide, 3000);  /* 每隔3秒进行一次滑动 */
});