如何使用CSS和Javascript在我的侧边导航上添加从左到右的平滑幻灯片效果？

<ul class="slider">
  <li><a href="#slide1">Slide 1</a></li>
  <li><a href="#slide2">Slide 2</a></li>
  <li><a href="#slide3">Slide 3</a></li>
</ul>

.slider {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.slider li {
  display: inline-block;
  margin-right: 10px;
}

.slider li a {
  text-decoration: none;
  color: #000;
  padding: 5px;
  border: 1px solid #000;
  border-radius: 5px;
}

.slide-container {
  width: 600px; /* 幻灯片容器的宽度 */
  height: 300px; /* 幻灯片容器的高度 */
  overflow: hidden;
  position: relative;
}

.slide {
  width: 600px; /* 幻灯片的宽度 */
  height: 300px; /* 幻灯片的高度 */
  position: absolute;
  top: 0;
  left: 0;
  transition: left 0.5s ease-in-out; /* 添加过渡效果 */
}

const slider = document.querySelector('.slider');
const slides = document.querySelectorAll('.slide');
let currentSlide = 0;

slider.addEventListener('click', (e) => {
  e.preventDefault();
  if (e.target.tagName === 'A') {
    const targetSlide = e.target.getAttribute('href');
    const slideIndex = Array.from(slides).findIndex(slide => slide.id === targetSlide);
    if (slideIndex >= 0 && slideIndex !== currentSlide) {
      const container = document.querySelector('.slide-container');
      const slideWidth = container.offsetWidth;
      const offset = slideWidth * (currentSlide - slideIndex);
      container.style.left = `${offset}px`;
      currentSlide = slideIndex;
    }
  }
});