iPad 프레임 내에서 이미지를 흉내내는 방법은 무엇입니까?

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 /> 

I는 다음과 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 
    }); 

    });