Как мне наложить прозрачное изображение на свайпер и при этом иметь возможность смахивания?

Question

У меня есть изображение iPad с прозрачным фоном, чтобы изображения в нем были внутри.

Codepen здесь.

У меня проблема в том, что когда у меня есть изображение iPad за пределами swiper-container Div, это выглядит великолепно, но я больше не могу нажимать на изображения в swiper, чтобы переместить / провести их..

   <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 он отлично работает, но он не перекрывает изображения так, как мне нужно. Свир-контейнер подрезает его.

<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>

Любые идеи о том, как обернуть image-slider с прозрачным фоном iPad, в то же время можно смахивать изображения?

Answer 1

Добавление pointer-events: none; за .ipad-frame позволит сильно ударить изображение