绝对位置时的滑动轮播问题答案

【问题标题】：Swiper carousel problem when position absolute绝对位置时的滑动轮播问题
【发布时间】：2022-01-31 06:39:30
【问题描述】：

我正在尝试使用swiper 轮播创建一个项目的循环轮播，但不知何故它根本不起作用。问题是 carousel 必须是绝对位置，因此项目将来自 carousel 容器外部的屏幕右侧。所以最终的图像应该是这样的：

我看到一些类在单击下一个/上一个按钮时试图更改，但动画没有发生，幻灯片实际上也没有切换。这是滑块的实际代码： https://codepen.io/chakachuk/pen/VwMJEwG

谢谢！

【问题讨论】：

标签： css-position swiper absolute swiperjs swiper.js

【解决方案1】：

与其搞乱轮播的内部结构，不如简单地创建另一个单独的 div 来表示轮播的“背景”可能会更好（而且容易得多）。

所以去掉.themesCarousel 上的position: absolute，然后添加如下内容（基于您的原始代码）：

HTML：

<section class="carouselOuter">
  <div class="carouselBG"></div>
  <div class="col -themesCarousel">
  ...
  </div>
</section>

CSS：

section.carouselOuter {
  background-color: skyblue; // change this to your bg image, just there so you can see that it's working...
  position: relative;
}

.carouselBG {
  position: absolute;
  top: 1rem;
  bottom: 1rem;
  left: 1rem;
  right: 5rem;
  background-color: white;
}

.themesCarousel_next {
  right: 5rem;
}

这是一个 CodePen 显示完整的“工作”，虽然你有一些其他奇怪的 CSS/JS 在这里进行，所以你的重点轮播项目已关闭，但这超出了你的问题范围。 .

【讨论】：