Question

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

我使用Swiper来模仿触控滑块效果。

我已经创建了一个代码库来说明我们在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个滑块，我使用2并同步它们。我可以将1滑块的大小限制为iPad所需的大小。

我的分叉代码解决方案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 />

确保我将滑块与以下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
    });

  });

如何模仿在iPad框架内滑动的图像？

1 个答案: