如何动态添加离子幻灯片？

<div id="slider-container"></div>
<button id="prev-btn">上一张</button>
<button id="next-btn">下一张</button>

// 幻灯片数据
var slides = [
  { image: 'slide1.jpg', title: 'Slide 1', description: 'This is slide 1' },
  { image: 'slide2.jpg', title: 'Slide 2', description: 'This is slide 2' },
  { image: 'slide3.jpg', title: 'Slide 3', description: 'This is slide 3' }
];

// 获取幻灯片容器和按钮元素
var container = document.getElementById('slider-container');
var prevBtn = document.getElementById('prev-btn');
var nextBtn = document.getElementById('next-btn');

// 动态生成幻灯片
function generateSlides() {
  var html = '';
  for (var i = 0; i < slides.length; i++) {
    html += '<div class="slide">';
    html += '<img src="' + slides[i].image + '" alt="' + slides[i].title + '">';
    html += '<h3>' + slides[i].title + '</h3>';
    html += '<p>' + slides[i].description + '</p>';
    html += '</div>';
  }
  container.innerHTML = html;
}

// 切换幻灯片
function switchSlide(direction) {
  var currentSlide = container.querySelector('.active');
  var slides = container.querySelectorAll('.slide');
  var currentIndex = Array.from(slides).indexOf(currentSlide);
  var newIndex;

  if (direction === 'prev') {
    newIndex = currentIndex === 0 ? slides.length - 1 : currentIndex - 1;
  } else {
    newIndex = currentIndex === slides.length - 1 ? 0 : currentIndex + 1;
  }

  currentSlide.classList.remove('active');
  slides[newIndex].classList.add('active');
}

// 添加按钮点击事件监听
prevBtn.addEventListener('click', function() {
  switchSlide('prev');
});

nextBtn.addEventListener('click', function() {
  switchSlide('next');
});

// 初始化幻灯片
generateSlides();
container.querySelector('.slide').classList.add('active');