How do I mimic images swiping within an iPad frame? - css

Question

We have a series of slides. Each slide contains an image. We want to have a static iPad frame on each slide and have slide transitions make it appear as if the images are swiping within that frame only.
I'm using Swiper to mimic the touch slider effect.
I've created a codepen illustrating what we're after here.
The basic HTML looks like this:
<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>
Maybe there is a best way to do this within Swiper, and maybe it's just a clever CSS solution? I'm not sure.
Ideas? Suggestions? Solutions? :)

Answer 1

So I finally worked out a solution.
If instead of 1 slider, I use 2 and sync them. I can constrain the size of the 1 slider to be exact size I need for the iPad.
My forked codepen solution 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 />
Making sure I sync the sliders with the following 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
});
});