向图像添加 href 标签会破坏轮播吗？

Question

我正在尝试制作一个滑块，一次显示 4 个水平图像，并且每个图像都有超链接。添加超链接会破坏代码。我在 CSS 中添加了“a”标签，并希望它能够继续工作，但它使幻灯片垂直并显示所有幻灯片，而不是一次只显示 4 个。会不会是js有问题？我在下面添加了 css 部分，因为我认为这就是问题所在。完整代码位于下面的 jsfiddle 链接中。本质上，我正在尝试制作一些看起来类似于 Netflix 标题预览轮播的东西。

这是我的 jsfiddle 链接： https://jsfiddle.net/Kronos11/s9uqjy6p/

.container a {
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.slider a {
  --items-per-screen: 4;
  --slider-index: 0;
  display: flex;
  flex-grow: 1;
  margin: 0 var(--img-gap);
  transform: translateX(calc(var(--slider-index) * -100%));
  transition: transform 250ms ease-in-out;
}

.slider > a img {
  flex: 0 0 calc(100% / var(--items-per-screen));
  max-width: calc(100% / var(--items-per-screen));
  aspect-ratio: 16 / 9;
  padding: var(--img-gap);
  border-radius: 1rem;
}

Answer 1

我调整了你的 CSS、HTML 和 JS 文件：“new-class”类被添加为所有图像的容器，并与按钮分开，你瞄准了错误的类来更新 itemsPerPage 和 sliderIndex，因此，它返回“NaN”导致错误，并且您没有在 onHandleClick 函数中调用calculateProgressBar 函数。我希望这对您有所帮助，而且还为时不晚。 JS 代码相当长，这是 Codepen 链接：https://codepen.io/beth-codes/pen/BaEzJBw?editors=1111

 <div class="container">
  <button class="handle left-handle">
    <div class="text">&#8249;</div>
  </button>
   <div class="new-class">
       <div class="slider">
         <a href="https://www.youtube.com/watch?v=-v8-jebvHtY">
           <img src="https://streamwon.com/wp-content/uploads/2024/03/Blue-and-Yello-intro.jpg">
         </a>
       </div>
     //other slider images container
  </div>
  <button class="handle right-handle">
    <div class="text">&#8250;</div>
  </button>
</div>

CSS

 .new-class{
   margin-block: 5rem;
   display: flex;
   overflow-x: hidden;
   --slider-index: 0;
   --items-per-screen: 4;
  }

.slider{
  display: flex;
  transform: translateX(calc(var(--slider-index) * -150%));
  transition: transform 250ms ease-in-out;
 }