如何在滑动器上覆盖透明图像并仍然能够滑动？

Question

我有一个 iPad 图像具有透明背景，因此滑动器图像在其中。

Codepen here.

我遇到的问题是，当我拥有 swiper-container div 的 iPad 图像外部时，它看起来很棒，但我无法再点击滑动器中的图像来 move/swipe 它们..

   <div class="swiper-container image-slider">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="https://unsplash.it/300/400/?random" />
        </div>
        <div class="swiper-slide">
          <img src="https://unsplash.it/300/420/?random" />
        </div>
        <div class="swiper-slide">
          <img src="https://unsplash.it/300/410/?random" />
        </div>
      </div>
    </div>
    <img class="ipad-frame" src="https://www.dropbox.com/s/2ehll1khqxw7nxl/ipad_isolated_no_bg.png?raw=1" />
  </div>

当我把 iPad 图像放在里面 swiper-container div 效果很好，但它不与图像重叠因为我需要它。 swiper-container 裁剪它。

<div class="swiper-container image-slider">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="https://unsplash.it/300/400/?random" />
    </div>
    <div class="swiper-slide">
      <img src="https://unsplash.it/300/420/?random" />
    </div>
    <div class="swiper-slide">
      <img src="https://unsplash.it/300/410/?random" />
    </div>
  </div>
  <img class="ipad-frame" src="https://www.dropbox.com/s/2ehll1khqxw7nxl/ipad_isolated_no_bg.png?raw=1" />
</div>

关于如何用 iPad 透明背景包裹 image-slider 同时仍能滑动图像有什么想法吗？

Answer 1

为 .ipad-frame 添加 pointer-events: none; 将允许滑动图像

如何在滑动器上覆盖透明图像并仍然能够滑动？

How do I overlay a transparent image on a swiper and still be able to swipe?

css

swiper