将父级的子级ul从左向右滑动jquery

<div class="parent">
  <ul class="child">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
</div>

.parent {
  width: 300px;
  overflow: hidden;
}

.child {
  width: 1200px; /* 假设子级ul的宽度是父级元素的4倍 */
  list-style: none;
  margin: 0;
  padding: 0;
}

.child li {
  float: left;
  width: 300px; /* 假设每个子级li的宽度是父级元素的1倍 */
}

$(document).ready(function() {
  var parentWidth = $('.parent').width();
  var childWidth = $('.child').width();
  
  // 设置子级ul的初始位置
  $('.child').css('margin-left', -childWidth + 'px');
  
  // 点击按钮触发滑动效果
  $('.btn-slide').click(function() {
    $('.child').animate({
      'margin-left': '0px'
    }, 500); // 动画持续时间为500毫秒
  });
});