css - 如何模拟在 iPad 框架内滑动的图像？

Question

我们有一系列幻灯片。每张幻灯片都包含一张图片。我们希望在每张幻灯片上都有一个静态的 iPad 框架，并让幻灯片过渡看起来好像图像只在该框架内滑动。

我正在使用 Swiper模仿触摸 slider 效果。

我创建了一个代码笔来说明我们在寻找什么 here .

基本的 HTML 看起来像这样:

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="https://unsplash.it/200/302/?random" />
      <p>Harry Potter is a series of fantasy literature written by British author J. K. Rowling. The novels chronicle the life of a young wizard, Harry Potter, and his friends Hermione Granger and Ron Weasley, all of whom are students at Hogwarts School
        of Witchcraft and Wizardry.</p>
    </div>
    <div class="swiper-slide">
      <img src="https://unsplash.it/200/301/?random" />
      <p>Jason Bourne is a fictional character and the protagonist of a series of novels by Robert Ludlum and subsequent film adaptations. He first appeared in the novel The Bourne Identity (1980), which was adapted for television in 1988.</p>
    </div>
    <div class="swiper-slide">
      <img src="https://unsplash.it/200/304/?random" />
      <p>Chiang Mai (/ˈtʃjɑːŋˈmaɪ/, from Thai: เชียงใหม่ [tɕʰiəŋ màj] ( listen), Lanna: ᨩ᩠ᨿᨦᩉ᩠ᨾᩲ᩵ [t͡ɕīaŋ.màj] ( listen)) sometimes written as "Chiengmai" or "Chiangmai", is the largest and most culturally significant city in Northern Thailand.</p>
    </div>
  </div>

  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

也许在 Swiper 中有一个最好的方法来做到这一点，也许它只是一个聪明的 CSS 解决方案？我不确定。

想法？建议？解决方案？ :)

Answer 1

所以我终于想出了一个解决方案。

如果不是 1 个 slider ，我使用 2 个并同步它们。我可以将 1 slider 的大小限制为 iPad 所需的精确大小。

我的 fork 代码笔解决方案 here .

<div class="ipad-slider">
  <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://dl.dropboxusercontent.com/u/14057353/ipad_isolated-cropped.png" />
  </div>

  <div class="swiper-container quote-slider">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <p>Harry Potter is a series of fantasy literature written by British author J. K. Rowling. The novels chronicle the life of a young wizard, Harry Potter, and his friends Hermione Granger and Ron Weasley, all of whom are students at Hogwarts School
          of Witchcraft and Wizardry.</p>
      </div>
      <div class="swiper-slide">
        <p>Jason Bourne is a fictional character and the protagonist of a series of novels by Robert Ludlum and subsequent film adaptations. He first appeared in the novel The Bourne Identity (1980), which was adapted for television in 1988.</p>
      </div>
      <div class="swiper-slide">
        <p>Chiang Mai (/ˈtʃjɑːŋˈmaɪ/, from Thai: เชียงใหม่ [tɕʰiəŋ màj] ( listen), Lanna: ᨩ᩠ᨿᨦᩉ᩠ᨾᩲ᩵ [t͡ɕīaŋ.màj] ( listen)) sometimes written as "Chiengmai" or "Chiangmai", is the largest and most culturally significant city in Northern Thailand.</p>
      </div>
    </div>


  </div>

  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

</div>
<hr />

确保我将 slider 与以下 JS 同步..

  $(document).ready(function() {

    var quoteSwiper = new Swiper('.quote-slider');

    var imageSwiper = new Swiper('.image-slider', {
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev',
      control: quoteSwiper
    });

  });