既然你想有一个幻灯片效果（我预计你想自己做，而不想使用库），你需要做一些css技巧。我最近在React中实现了类似的东西，所以也许这会给予你一个完整的例子，我将在下面提到Github ReactSlider.tsx
不过，我对这个函数的解释如下：

• 您可以将所有幻灯片并排设置在比视口宽得多的大容器中。
• 当你想改变幻灯片你平移容器100vw（100%的视口宽度）向左或向右，取决于你的方向（css transform选项与translate3d(x, 0 [y], 0 [z])）
• 外部容器需要有overflow: hidden css选项。

如果要从DOM中完全删除另一张幻灯片，可以按如下方式执行：

• 并排创建两个容器，一个在视口外部，一个在视口内部
• 在幻灯片切换时，将“旧”幻灯片平移出视口（如上例），将另一个幻灯片平移入视口。
• 然后从现在的“外部”容器中删除内容。

下面是一个例子：

let currentTranslation = 0;

function next() {
  currentTranslation -= 100;
  updateTranslation();
}

function prev() {
  currentTranslation += 100;
  updateTranslation();
}

function updateTranslation() {
  let container = $(".inner-container");
  container.css('transform', 'translate3d(' + currentTranslation + 'vw, 0, 0)');
}

body {
  margin: 0;
  padding: 0;
}

.outer-container {
  background: red;
  min-height: 200px;
  overflow: hidden;
}

.inner-container {
  display: flex;
  flex-direction: row;
  min-height: 200px;
  flex-wrap: nowrap;
  gap: 10px;
  
  transition: .2s ease-in-out;
}

.slide1, .slide2, .slide3 {
  display: block;
  min-width: calc(100vw - 10px);
  background: green;
  min-height: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="outer-container">
  <div class="inner-container">
    <div class="slide1"><h1>Slide 1</h1></div>
    <div class="slide2"><h1>Slide 2</h1></div>
    <div class="slide3"><h1>Slide 3</h1></div>
  </div>
</div>
<button onclick="next()">next</button>
<button onclick="prev()">prev</button>

若要使用您提供的代码切换幻灯片，您需要更新showSlide函数以实际显示您要显示的幻灯片。当前，该函数仅更新index变量，但实际上不会更改页面上任何元素的显示。
实现这一点的一种方法是使用index变量从models数组中访问正确的幻灯片，然后更新页面上元素的显示以显示该幻灯片。下面是一个示例，说明如何执行此操作：

function showSlide(i) {
  index = i;
  if (i < 0) {
    index = slideCount - 1;
  }
  if (i >= slideCount) {
    index = 0;
  }

  // Get the current slide from the models array
  var currentSlide = models[index];

  // Update the display of the elements on the page to show the current slide
  document.querySelector("#card1").style.display = "none";
  document.querySelector("#card2").style.display = "none";
  document.querySelector("#card3").style.display = "none";
  document.querySelector("#card" + (index + 1)).style.display = "block";
}

此代码假定页面上有ID为#slideTitle、#arrowLeft和#arrowRight的元素，这些元素用于显示当前幻灯片的标题并允许用户在幻灯片之间导航。您需要调整代码以匹配HTML的结构和要更新的元素。