Wie ahmt ich Bilder nach, die innerhalb eines iPad-Frames wischen?

Question

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.

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? :)

Answer 1

Also habe ich endlich eine Lösung ausgearbeitet.

Wenn anstelle von 1 Schieberegler, verwende ich 2 und synchronisieren Sie sie. Ich kann die Größe des 1 Schiebereglers auf genau die Größe begrenzen, die ich für das iPad brauche.

Meine gegabelte Codepenlösung 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 /> 

Sicherstellen, dass ich die Regler mit der folgenden JS synchronisieren ..

$(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 
    }); 

    });