绝对位置时的 Swiper 轮播问题

Question

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

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

谢谢！

Answer 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，因此您的焦点轮播项目已关闭，但那超出了你的问题范围...

绝对位置时的 Swiper 轮播问题

Swiper carousel problem when position absolute

css-position

swiper

absolute

swiperjs

swiper.js