Wir haben eine Reihe von Folien. Jede Folie enthält ein Bild. Wir möchten auf jeder Folie einen statischen iPad-Rahmen haben und über Folienübergänge so aussehen, als würden die Bilder nur innerhalb dieses Rahmens wischen.Wie ahmt ich Bilder nach, die innerhalb eines iPad-Frames wischen?
Ich verwende Swiper, um den Touch-Slider-Effekt nachzuahmen.
Ich habe einen Codepen erstellt, der zeigt, was wir wollen here.
Die grundlegende HTML sieht wie folgt aus:
<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>
Vielleicht gibt es eine beste Weg, dies innerhalb swiper zu tun, und es ist vielleicht nur eine clevere CSS-Lösung? Ich bin mir nicht sicher.
Ideen? Vorschläge? Lösungen? :)